10 conseils pour améliorer le design de son site radio

Vous avez lancé votre webradio ainsi que votre site web ? Qu’il soit en ligne depuis une semaine ou depuis des années, son design peut presque toujours gagner en clarté. Un visiteur décide en quelques secondes s’il reste : le visuel, la navigation et la place du player comptent autant que votre musique.

Pour une station diffusée sur internet, le site est souvent le premier contact avec vos futurs auditeurs. Voici 10 conseils pour l’améliorer, l’embellir et offrir une meilleure expérience à vos utilisateurs.

1. Commencez par un état des lieux
2. Concevez d’abord la version mobile
3. Placez le player au coeur du design
4. Simplifiez la navigation
5. Harmonisez vos couleurs
6. Choisissez une typographie lisible
7. Rendez votre site accessible à tous
8. Soignez la qualité de vos images
9. Mettez en page vos contenus
10. Donnez à votre site une identité visuelle

1. Commencez par un état des lieux

Avant de changer quoi que ce soit, regardez votre site avec les yeux d’un visiteur. Vous saurez quoi corriger en priorité et vous pourrez ensuite mesurer l’effet de vos changements :

• Testez-le sur votre téléphone : le player se lance-t-il en un clic ? Le menu s’ouvre-t-il facilement ? Le texte se lit-il sans zoomer ?
• Mesurez sa vitesse : avec PageSpeed Insights, outil gratuit de Google qui note la performance de chaque page, sur mobile et sur ordinateur (il liste ce qui la ralentit : images trop lourdes, scripts, polices)
• Regardez vos statistiques : si votre site est rattaché à Google Analytics, vérifiez les pages les plus vues, durée d’engagement, part des visites sur mobile (une page très visitée mais vite quittée cache souvent un problème de design)
• Demandez l’avis de quelques auditeurs : ce qu’ils cherchent en arrivant, ce qu’ils ne trouvent pas
• Comparez les sites d’autres stations : regardez ce que font les autres

Notez tout ce que vous voyez : ça servira de point de comparaison une fois le nouveau design en ligne.

2. Concevez d’abord la version mobile

Un site web responsive, qui s’adapte à tous les supports (smartphone, tablette, ordinateur), est aujourd’hui la base. Le vrai changement, c’est la conception mobile first : on dessine d’abord la version mobile, puis on l’adapte aux grands écrans.

Environ 64% des recherches se font sur smartphone, contre 35% sur ordinateur. Google utilise d’ailleurs la version mobile de vos pages pour les indexer et les classer. Un design pensé pour le mobile sert donc vos utilisateurs comme votre référencement.

Concrètement :

• Un menu court, facile à ouvrir avec le pouce
• Des boutons assez grands pour être touchés sans erreur
• Des pages légères qui s’affichent vite, même avec une connexion moyenne

Si vous ne le savez pas : RadioKing a une offre de création de site radio où vous pouvez profiter d’un design pensé mobile first. 

3. Placez le player au coeur du design

Le player est l’élément le plus important de votre page d’accueil : c’est lui qui transforme une visite en écoute. Il doit attirer l’attention de l’utilisateur dès l’arrivée et lancer le direct en un clic :

• En haut ou en bas de l’écran : toujours visible pendant la navigation pour que la musique ne s’arrête pas d’une page à l’autre
• Ce qui passe à l’antenne : titre en cours, nom de l’émission, pochette
• Dans le style de votre site : mêmes couleurs, mêmes formes, un player au visuel décalé casse l’harmonie
• Un lien vers votre application mobile : pour ceux qui veulent vous écouter partout, si vous en avez une

Sur mobile, préférez un player fixé en bas de l’écran : il reste accessible pendant que le visiteur fait défiler la page. Si vous diffusez plusieurs flux, par exemple une programmation principale et des déclinaisons thématiques, regroupez-les dans le même player avec un sélecteur clair plutôt que de multiplier les pages.

Astuce avec l’offre RadioKing : l’apparence du player se règle depuis l’éditeur de design, sans une ligne de code.

4. Simplifiez la navigation

Une page web trop chargée met plus de temps à s’afficher et perd le visiteur avant la première note. Trop d’éléments créent aussi de la confusion : on ne trouve plus la grille des programmes, les podcasts ou le contact.

Pour une navigation fluide :

• Hiérarchisez : le direct et l’émission du moment en haut, dans un seul bloc bien visible
• Limitez le menu à 5 ou 6 rubriques : par exemple Écouter, Programmes, Podcasts, Actualités, Contact, voire Boutiques si vous vendez des produits dérivés
• Créez des pages dédiées : plutôt que d’empiler tous les contenus sur l’accueil
• Rendez les boutons d’action évidents : « Écouter en direct », « Voir les programmes », « Écouter nos podcasts », un bouton par action avec un verbe
• Regroupez le contact en pied de page : coordonnées, réseaux sociaux, équipe

Parfois, plus ne veut pas dire mieux.

5. Harmonisez vos couleurs

Respecter votre charte graphique est la règle numéro un. Limitez-vous à trois couleurs : une principale, une secondaire et une couleur d’accent, dont au moins une neutre (blanc, gris ou noir). Réservez la couleur d’accent aux boutons et aux éléments sur lesquels vous voulez attirer l’attention. Pensez aussi au contraste : un texte gris clair sur fond blanc se lit mal, surtout sur un téléphone en plein soleil.

Astuce : la roue chromatique d’Adobe Color vous montre les couleurs complémentaires et celles qui s’accordent entre elles.

6. Choisissez une typographie lisible

Une belle police ne sert à rien si on ne peut pas la lire. Quelques règles simples :

• Deux polices maximum : une pour les titres, une pour le texte
• Pas de texte entièrement en majuscules : plus difficile à lire
• Pas de police manuscrite pour le texte courant : gardez-la pour un logo ou un titre court
• Des polices sans empattement : comme Roboto, Helvetica ou Ubuntu, des valeurs sûres pour la lecture à l’écran

Choisissez enfin une typographie qui colle au ton de votre station : plus ronde pour une programmation familiale, plus géométrique pour de la musique électronique. Garder la même sur le site, l’application et vos visuels.

7. Rendez votre site accessible à tous

Un design accessible améliore l’expérience de tout le monde : personnes malvoyantes, seniors, mais aussi utilisateurs pressées sur un petit écran. Quelques réglages suffisent pour lever la plupart des obstacles :

• Un contraste suffisant : au moins 4,5:1 entre le texte et son fond, le seuil fixé par les règles d’accessibilité du web. Le Contrast Check de WebAIM, gratuit, le calcule pour vous
• Un texte assez grand : 16px minimum pour le texte courant
• Des zones cliquables confortables : boutons et liens d’au moins 44×44 px sur mobile, la taille recommandée par Apple
• Des liens qui disent où ils mènent : « Voir la grille des programmes » plutôt que « Cliquez ici »
• Pas de lecture automatique avec le son dès l’arrivée : laissez le visiteur lancer le player lui-même, de toute façon la plupart des navigateurs bloquent ce type de lecture
• Un texte alternatif pour chaque image : et si possible, une transcription de vos interviews phares

8. Soignez la qualité de vos images

Utilisez des images de qualité et à la bonne taille, sans pixellisation ni déformation. Pensez aussi à les compresser : une image trop lourde ralentit toute la page et pèse sur la performance du site.

Veillez à la cohérence entre vos visuels, notamment dans un slider : ne mélangez pas photos en noir et blanc et photos en couleurs. Un titre court intégré au visuel attire l’oeil, mais gardez l’information importante dans le contenu texte de la page : c’est ce que Google et les lecteurs d’écran peuvent lire. Dans le même esprit, décrivez chaque image dans son texte alternatif.

Astuces :
1. Créez votre logo et vos visuels en grand format. Vous pourrez ensuite les réduire pour chaque support (site, application ou réseaux sociaux) sans perte de qualité. Pour redimensionner une image gratuitement, vous pouvez utiliser iLoveIMG.
2. Pas de photos sous la main ? Des services de banque d’image comme Pexels ou Unsplash proposent des visuels libres de droits. Vérifiez toujours les conditions d’utilisation.

Formats et dimensions recommandés

À qualité égale, le format WebP est nettement plus léger que le JPEG et tous les navigateurs récents le lisent. Gardez le PNG pour les images qui ont besoin de transparence : pour une photo, il est beaucoup plus lourd. Enfin, pour qu’une image puisse s’afficher en grand dans Google Discover, Google recommande au moins 1200px de large, au format 16:9.

9. Mettez en page vos contenus

Un site doit vivre au rythme de votre antenne. Évitez les pages vides ou « en construction » : si une rubrique n’est pas prête, masquez-la le temps de la remplir.

Ce qui donne envie de revenir, à condition d’être bien mis en page :

• La grille des programmes : à jour, avec une page par émission
• L’actualité de la station : invités, événements, nouveautés
• Les podcasts et replays : classés par émission ou par thème
• La playlist : ainsi que les derniers titres diffusés

La page de chaque émission

C’est souvent par la page d’une émission qu’arrivent les visiteurs venus de Google ou des réseaux sociaux. Donnez-lui une structure fixe, la même pour toutes vos émissions :

• Un visuel et le nom de l’émission
• Le jour, l’horaire et l’animateur
• Une description courte (de quoi parle l’émission, à qui elle s’adresse)
• Un bouton pour écouter le direct ou le dernier épisode
• La liste des derniers podcasts

Un modèle identique aide le visiteur à se repérer d’une page à l’autre et vous fait gagner du temps à chaque nouvelle émission.

Aérez le contenu de vos pages : paragraphes courts, intertitres, listes, encadrés. Vous ne faites pas qu’informer : vous guidez le regard.

Pour faire venir de nouveaux visiteurs grâce à ces contenus, découvrez nos 12 idées pour augmenter le trafic de votre site radio et notre guide pour améliorer le référencement de votre site radio.

10. Donnez à votre site une identité visuelle

Votre site doit refléter le ton de votre station. Chaleureuse, authentique, culturelle ou sérieuse, l’identité visuelle doit prolonger ce que vos auditeurs entendent. Couleurs, typographie et images rappellent votre habille radio, vos jingles et vos émissions.

Rassemblez ces choix dans un guide de style d’une page : le logo et ses variantes (fond clair, fond sombre, version carrée pour les réseaux sociaux), les codes de vos couleurs, vos polices et le style de vos photos (couleur ou noir et blanc, cadrage, filtres). Toute personne qui publie sur le site, l’application ou les réseaux s’y réfère et votre station garde le même visuel sur tous ses supports.

Un bon design ne demande ni agence web, ni formation en webdesign : quelques règles simples suffisent. Un site clair, rapide et cohérent donne envie à vos visiteurs de lancer le player et de revenir. Quelques semaines après la mise en ligne, refaites l’état des lieux du premier conseil pour mesurer les progrès : vitesse, durée d’engagement, clics sur le player.

FAQ