fleche gauche
Logo SR
fleche droite

PARIS 2024

Petite introduction

Le travail que l'on va demander à un webdesigner est complet (vous aurez noté que je n'ai pas écrit « complexe » même si, dans le cas présent, c'est clairement un synonyme).
Lorsqu'un client commande un site Internet - ici le « Comité national olympique et sportif français » (on peut rêver, ceci n'était qu'un exercice) - le webdesigner va mettre à profit tout son savoir et son savoir-faire technique pour répondre au mieux à ses attentes.
Cela commence par l'étude du dossier (ici le sport et les Jeux Olympiques de Paris 2024), un peu de veille concurrentielle (que font « les autres » ?), puis l'établissement d'un cahier des charges dans lequel vont notamment être définis le style graphique et les éléments visuels (logos, bannières, montages divers).
Enfin, comme pour un meuble Ikea, le webdesigner crée des plans de montage et des maquettes qui permettront de coder en HTML/CSS/JS précisément le site Internet, et ce de manière responsive, évidemment !

Le moodboard

Ou la planche des tendances.
Il 'agit d'un premier montage (en général sous Photoshop) d'images, de photos, de logos, de couleurs, de textures ou de tout autre élément inspirant.
Dans mon cas, je connais déjà le logo de Paris 2024, je sais donc déjà les couleurs que je vais utiliser dans ma maquette finale. Pour le reste, je me suis dit qu'il fallait mettre à l'honneur Paris (forcément), les anneaux Olympiques (comment passer à côté), ainsi que du sport et des sportifs !
A partir de là, j'ai déjà une belle idée de ce que je vais faire.

Planche des tendances

Style board

Ou la planche de style.
A ce stade le travail devient plus concret. Cette planche constitue l'inventaire de ce que vous allez trouver sur ma maquette finale.
Vous pourrez donc y voir le logo, bien-sûr, mais aussi les couleurs exactes que je vais utiliser avec leurs codes hexadécimaux, quelques images, les éventuels boutons dans leur forme finale ainsi que leur comportement lors du survol à la souris (dit « hover »).
Aussi - et très important - y sera détaillée la mise en forme des textes (polices utilisées, tailles, graisses et couleurs) à l'aide d'exemples.
Enfin, seront notés quelques adjectifs symbolisant le site et ce qu'il est censé inspirer.

Planche de style

Bannière

Un peu de création maintenant.
Un beau site Internet a très souvent une belle image d'accueil qui peut très bien être un fond d'écran (dit « background »), mais qui est souvent une bannière de la largeur de l'écran.
Dans le cas de mon site pour Paris 2024, pour bien représenter cet évènement, j'ai eu l'idée de superposer des sportifs français, avec une photo de Paris et un dégradé semi-opaque aux couleurs du drapeau français.
J'ai donc utilisé Photoshop pour monter des photos de Nikola Karabatic (l'un des meilleurs handballeurs du monde, qui change de position comme par magie d'une photo à une autre), Teddy Riner (le plus grand judoka du monde) et Eva Lacheray (jeune espoir française de l'escrime)

Sportifs français
Bannière Paris 2024

Zoning

Voilà, c'est presque fini ! Il reste quand même la partie la plus importante d'un montage de site Internet : l'interface et l'expérience utilisateur (les fameux UI/UX).
Pour faire simple, l'interface (UI), c'est « comment je vais placer mes éléments ». L'expérience (UX), c'est plutôt « comment l'utilisateur final va les utiliser ».
Pour m'aider, il n'y a pas 36 solutions : il faut tester ! Pour les tests, je crée un « zoning », c'est-à-dire une maquette en « fil de fer » de mon site final, et ce sur tous les supports visés (grand écran, tablette et mobile).
Je n'hésite pas à m'inspirer de ce que l'on trouve sur Internet sur des sites similaires comme les fédérations de sport ou les comités étrangers. Le but étant de savoir où ils placent leurs logos, leurs boutons, la taille de leurs photos, etc.
Une fois ce benchmark effectué, je crée ce zoning sous Photoshop, ce qui va grandement m'aider pour la dernière étape...

Zoning du site

Maquettes

ENFIN ! C'est LE moment fun du montage de site, l'habillage !
Maintenant que j'ai les outils, la matière première et la notice de montage, je n'ai plus qu'à déposer les éléments à leur place pour voir apparaître ma maquette !
Et pour un peu plus de coquetterie, j'ai même utilisé des « mock up » pour placer virtuellement mes maquettes dans une tablette et un mobile (respectivement un iPad Mini et un iPhone 7), histoire de rendre le tout plus réaliste !
Cela permet aussi de se rendre compte de la façon dont « tombent » les éléments sur les formats tablette/mobile, et pourquoi pas les modifier en cas de défaut avant de tout envoyer au développeur afin d'éviter qu'il s'arrache ses cheveux gras...

Maquettes du site

Conclusion

Voilà un beau projet de site pour ces futurs jeux de Paris, tant attendus.
Un site qui nous présenterait les infrastructures, les spots immanquables, les activités autour des jeux, les actualités, les rencontres...
Bref, un site utile et utilisable par tous, #MadeForSharing !
Faites donc un tour sur le vrai site par ici.

Outil utilisé pour ce travail :

logo photoshop

Photoshop