Arthur Weill

Arthur Weill

-

Développeur Web
Directeur de Web and Cow

-

Blog

Projets

Contact

-

Twitter





















Concept de site web pour le Stade Rennais


Pourquoi faire un concept de site web ?

J'ai grandi à Rennes et j'ai attrapé le syndrome "Supporter de Stade Rennais" très jeune. Ce syndrome pousse à manger obligatoirement une galette saucisse (moutarde pour les connaisseurs) avant chaque match et à ne pas trop aimer tout ce qui porte un maillot jaune et vert Smile

Avant les matchs, je consulte souvent quelques stats, pour voir quels joueurs sont en forme dans chacune des équipes, pour connaitre les tendances des équipes à domicile ou à l'extérieur, etc. Pour trouver toutes ces infos, je me promène d'un site web à l'autre. Aucun ne synthétise vraiment tout. J'ai donc imaginé ce que pourrait être le site du Stade Rennais s'il permettait directement de voir toutes les données des matchs et qu'il offrait plus d'interactions avec les internautes (élection du joueur en forme, du joueur du match, liens directs aux réseaux sociaux, etc.).

Le concept est présenté ci-dessous et j'en profite pour souhaiter une belle année 2014 au Stade Rennais Football Club (et à tous les supporters), pleine de réussite sportive ! Je suis confiant pour la deuxième partie de la saison et je passerais au Stade de la route de Lorient pour soutenir les Rouges et Noirs !


Qu'est ce qu'on retrouve dans ce site ?

Ce concept de site web a été créé au moment du match Stade Rennais - Paris Saint Germain. 2 pages en lien avec ce match sont disponibles :

La page "d'avant match" Stade Rennais - Paris Saint Germain

La page "d'après match" Stade Rennais - Paris Saint Germain

La page "d'avant match" va surtout présenter l'historique de la confrontation (qui a gagné le plus de fois le match ? etc.) mais également des statistiques sur la saison en cours, sur les matchs à domicile, à l'extérieur, sur les séries en cours, etc. Cela va permettre de se faire une bonne idée de la forme des équipes. S'il y a des infos intéressantes, comme un joueur blessé ou suspendu, cela sera indiqué sur cette page. Tout pour connaitre les détails de la rencontre à venir ! Vous pouvez utiliser les flèches et de votre clavier pour faire défiler les différentes statistiques.

La page "d'après match" présente un petit bilan du match : score, buteurs, composition, changements, faits marquants, etc. Tout pour revivre la rencontre. D'autres petites choses ont été ajoutées pour permettre par exemple aux internautes de choisir le joueur de la rencontre ou encore de revivre le match sur Twitter grâce au hashtag associé au match (ici : #SRFCPSG). Il sera également possible de voir l'évolution au classement pour chaque équipe à la suite du résultat de la rencontre.


2 pages avec 2 navigations différentes

En réalisant ce concept, nous avons hésité entre une navigation avec des flèches et une navigation verticale, à l'aide du scroll de la souris. Du coup, nous avons réalisé les deux, comme ça chacun peut se faire son avis sur sa navigation préférée.


La page Avant Match

Concept SRFC

Cliquez sur "Voir le calendrier" pour afficher les rencontres passées et à venir.



Concept SRFC

Cliquez sur les petites flèches (ou avec les flèches de votre clavier) pour naviguer dans les statistiques. Chaque graphique est interactif. Vous retrouverez les évolutions du classement à la fin.


La page Après Match

Concept SRFC

Dans le tableau des joueurs, cliquez sur un joueur pour voir par qui il a été remplacé. Cliquez sur les joueurs sur le terrain pour les mettre en surbrillance dans le tableau.

Concept SRFC

Cliquez sur la flèche pour voir l'effet du match sur le nombre de points, le classement, la différence de buts, etc. Dommage que le Stade Rennais n'ait pas battu le PSG !


Il y a d'autres petites interactions à découvrir sur les 2 pages !

Vous retrouvez également les liens vers Twitter et le hastag associé au match. Le Stade Rennais est très actif sur Twitter et aussi sur Facebook, Google+ et Dailymotion.


Evolutions possibles

Ce concept peut être poussé encore plus loin en travaillant sur d'autres points :

Site web responsive : Cela consiste à permettre au site web de s'adapter directement aux petits écrans (tablettes et smartphones) sans avoir à changer complètement le site web mais simplement en réorganisant le contenu (suppression de certains éléments, diminution d'autres, etc.).

Visualisation de données évoluées : En ayant accès à une base de données conséquentes et en utilisant des bibliothèques telles que D3.js, il serait possible de créer de nombreuses visualisations de données en lien avec les performances de l'équipe, de chaque joueur, de chaque rencontre, etc.

Compatibilité : Comme c'est un concept, il se peut que certaines choses ne fonctionnent pas très bien, notamment sur de vieux navigateurs. Une version réelle serait conçue pour fonctionner partout.

Si jamais il y a des choses que vous auriez aimé voir sur ces pages, n'hésitez pas à le dire dans les commentaires ci-dessous.


Si ces 2 pages vous ont plu, n'hésitez pas à les partager sur votre réseau préféré ! Et n'hésitez pas à me contacter si vous avez des projets web pour l'année 2014 !

Revoilà les liens :

La page "d'avant match" Stade Rennais - Paris Saint Germain

La page "d'après match" Stade Rennais - Paris Saint Germain

Merci de votre visite et bonne année à tous !


← Retour