En 2012, “Le Monde” décide de revoir complètement le design et les fondations techniques de son site. Une volonté : rénover la marque sur le Web et proposer une expérience nouvelle et cohérente sur une multitude de supports. Un projet réalisé en un temps record.
Créé en 1944, “Le Monde” est le quotidien de référence de la presse française. Son site Web est l’un des plus fréquenté de France avec 10 millions de visiteurs uniques par mois.
En 2009, à la demande de son équipe Produit, je rejoins le Monde interactif afin d’assurer le lead design des projets numériques et mettre en place le studio graphique digital du quotidien.
En 2011, la nouvelle direction du groupe décide de lancer une nouvelle formule du journal et de l’accompagner d’une profonde refonte éditoriale et graphique du site LeMonde.fr.
Parmi les éléments du brief initial :
Le nouveau site devra exprimer le renouveau du titre, mettre en avant un nouvel outil “Le live”, la production – en forte hausse – de vidéos et l'enrichissement de toutes les rubriques, notamment l'économie, la culture et l'international.
Au delà de cette mission, l’objectif était de proposer un nouveau système graphique simple et puissant qui permettrait de faire évoluer le site au fil des années et de déployer de manière cohérente, la marque “Le Monde” sur l’ensemble des plateformes digitales présentes et à venir : site, site mobile, application smartphone et tablette, web tv, wearable device.
Ce projet est le fruit d’une collaboration très étroite avec la très talentueuse Melina Zerbib.
Différents écrans de l’ancien site créé entre 2005 et 2009 par Jacqueline Yue
Très innovant à son lancement, le site du Monde avait peu évolué. Construit sur des bases graphiques et techniques anciennes et hétéroclites, la refonte nécessitait une mise à plat complète de l’architecture du site : un travail titanesque pour la technique, l’équipe produit et le studio graphique. Le projet a été réalisé en un temps record, du 4 janvier 2012 au 19 mars 2012 (60 jours).
Pour stimuler la créativité des équipes, faire émerger de nouvelles pistes, une compétition interne est organisée. 4 équipes sont créées et invitées à travailler sur une courte période – et en huis-clos.
Ce projet a nécessité la création et la production de plusieurs centaines de pages et d’éléments graphiques.
Vous trouverez ici une sélection d’écrans représentatifs de la refonte :
Les pages de rubriques dont la Une économie et la Une video
La Une – point d’entrée du site – a fait l’objet d’un travail complexe et méticuleux.
Objectifs de cette page : offrir une vision synthétique et hiérarchisée de l’actualité du moment et – aussi (presque paradoxalement) – présenter toute la richesse de l’offre du Monde.
Contrainte supplémentaire : offrir à la rédaction des outils d’édition puissants afin de faire évoluer la Une rapidement au fil de l’actualité ou de l’heure de la journée.
Cette page se divise en 2 parties : un bloc principal d’actualités hiérarchisés suivi d’une immense “colonne vertébrale” composée d’une multitude de bloc thématique.
La redaction dispose d’un outil puissant d’édition et d’organisation des blocs thématiques de Une.
Celui-ci permet de choisir un type de bloc (nombre et taille d’image), une thématique et son positionnement dans la “colonne vertébrale”. Cette mise en forme évolue au fil de l’actualité ou selon l’heure de la journée.
Le site mobile – initialement en dehors du périmètre de la refonte – a été réalisé en 3 jours par le développeur Greg Bergé. Ultra-rapide, cette version light du site est devenue une source non-négligeable de trafic pour Le Monde.
De manière exceptionnelle, la rédaction a la possibilité de “casser” la Une afin de réagir à une actualité exceptionnelle (événement, catastrophe, etc). Un gabarit “large” a été mis au point à cette effet. Ci-dessous, la Une au soir des élections présidentielle de 2012.
Pour une meilleure lisibilité et afin de faciliter la conception et l’intégration du site, une grille de 18 colonnes a été mise en place sur l’ensemble du site.
L’un des objectifs majeurs de la refonte est de mettre en valeurs les rubriques du Monde. Un code couleur a donc été mis au point et réservé à chaque thématique. Chaque rubrique dispose de sa mini-une et de son logo sur le mode “M+rubrique”.
Sur le sujet : Le Monde, mode d’emploi
La vidéo est au cœur de la nouvelle stratégie du quotidien. Pour porter cet effort éditorial, une chaîne – aux codes graphiques spécifiques – a été créée.
La page article devait absolument être simplifiée et clarifiée. Une structure à 2 colonnes a été choisie. Pour cela, il a été nécessaire de travailler étroitement avec la régie publicitaire du Monde afin de réduire le “maillage publicitaire” de cette page. Résultat : pas d’habillage, ni de publicité dans le “flow” de l’article. Par ailleurs, un effort particulier a été porté sur le traitement typographique et la lisibilité.
Réalisé en un temps record (60 jours de la conception à la production), la refonte a été un succès et a participé à élargir l’audience du Monde. Le jour du lancement le site reçoit de nombreux commentaires largement favorables. Extraits :
Félicitations pour ce travail de refonte d'ampleur. Franchement, on ne s'attendait pas à ça. LeMonde.fr est devenu le site internet français d'informations le plus agréable à lire. Bravo
Très épurée cette nouvelle formule, j'aime beaucoup
Très belle présentation. Navigation souple et plaisante. Affichage rapide
Quelques rares lecteurs expriment un jugement moins enthousiaste…
C'est quoi cette bouillie infame imposée en une nuit sans prévenir ? un moyen de désinformation pour couper la parole aux abonnés ? Ersatz Américain après Le Post ? Une vache n'y retrouverait pas son veau !!!!,
Completement raté…
Les équipes du Monde compileront toutes ces remarques afin d’établir la feuille de route des évolutions futures.
Au delà des retours qualitatifs, les chiffres de fréquentation témoignent d’un succès excpetionnel
Le site du Monde est l’un des plus visités de France. Ce trafic considérable (et coûteux pour l’éditeur) nécessite de mettre en place des réponses techniques appropriées. Un design inadapté aurait de lourdes conséquences sur les performances du site et notamment son temps de chargement. Sous l’impulsion des équipes techniques (notamment Ismaël Hery), nous avons adapté notre travail et participé au succès du Monde.fr