Magma
La refonte complète du site de Magma, l'association bruxelloise qui ouvre les médias et les arts aux 15-30 ans.
Nouvelle identité web, nouvelle arborescence et deux espaces distincts, l'association et un webmédia, construits avec Elementor pour que l'équipe garde la main sur ses contenus.
L'ancien site
L'ancien site mag-ma.org mettait tout au même niveau : actualités de l'association, offres de stage, articles écrits par les jeunes, agenda. Le menu principal reprenait des rubriques éditoriales (Société, Convictions, Relations, Nord/Sud, Culture, Emploi) qui ne disaient rien de l'association elle-même. Sa mise en page de journal papier ne parlait plus à un public de 15-30 ans.
La refonte
J'ai séparé les deux missions de Magma. magma-asbl.be présente l'association : qui elle est, ses projets, son agenda, son offre pédagogique, comment la rejoindre ou la soutenir. magma-media.be devient le webmédia des jeunes, classé par thématiques et par formats. Les deux espaces partagent la même charte et la même administration.
Avant, après
Faites glisser la poignée pour comparer l'ancien site et le nouveau, page par page.
La charte graphique
Une identité vive, faite pour des jeunes de 15 à 30 ans, et assez structurée pour une association reconnue par la Fédération Wallonie-Bruxelles.
Couleurs
- Turquoise#1EB6A7Boutons, liens, côté asbl
- Violet#AD8EECCouleur principale, titres de rubrique
- Orange#FFA024Touches ponctuelles
- Gris clair#F6F6F6Fonds de section
- Noir#000000Texte, fond du webmédia
Le dégradé turquoise-violet signe l'en-tête, les boutons et les bandeaux.
Typographie
Aa
Deviens acteur·ice des médias !
Les citoyen·nes, les ami·es, tous·tes.
BBB Poppins TN
Une version post-binaire de Poppins. Ses ligatures dessinent l'écriture inclusive : « acteur·ice » ou « citoyen·nes » s'affichent en un seul mot, sans point médian isolé. La coupe Display sert aux titres, la coupe Text à la lecture.
Dessin : Eugénie Bidaut & Camille°Circlude et al., typothèque Bye Bye BinaryThème clair
magma-asbl.beFond clair et en-tête en dégradé turquoise-violet pour présenter l'association, ses projets et son offre pédagogique.
Thème sombre
magma-media.beFond noir et contrastes forts : les visuels des publications passent au premier plan et le webmédia se distingue de l'asbl au premier regard.
Des arches pour les portraits
Les photos de l'équipe sont découpées en arche : on reconnaît Magma sans lire le logo.
Des pastilles pour filtrer
Projets, thématiques et formats se filtrent avec des pastilles cliquables plutôt qu'avec de longs menus.
Des sections courtes
Chaque bloc de l'accueil répond à une question : qui est Magma, ce que font les jeunes, ce qui arrive bientôt, comment s'impliquer.
Construit pour durer
Un kit global plutôt que des réglages page par page
Couleurs et styles de texte sont déclarés une fois dans le kit Elementor, puis appelés par chaque widget. Les tailles sont en em, relatives au texte de base. Changer une valeur du kit met à jour tout le site.
- 11 couleurs globales, dont 3 transparences
- 12 styles typographiques, de 0,7em à 3,4em
- Police servie depuis le site, sans appel à Google Fonts
Des modèles d'en-tête et de pied de page
Chaque univers a son en-tête et son pied de page, construits une fois dans le Theme Builder et appliqués à toutes ses pages. La bande des partenaires est un bloc unique, inséré dans les deux pieds de page : un logo ajouté apparaît partout.
- Toutes les pages en conteneurs Flexbox
- Aucune section Elementor ancienne génération
Des contenus qui se rangent seuls
Les 11 thématiques et les 10 formats partagent un seul modèle d'archive. Les grilles d'articles interrogent la base par taxonomie, avec chargement progressif. Un article publié et classé apparaît dans sa thématique et son format sans qu'on retouche une page.
Deux domaines, une installation
magma-media.be affiche des pages du même WordPress sous un second nom de domaine. Pour le visiteur, c'est un site à part, avec son en-tête et sa navigation. Pour l'équipe, il n'y a qu'une administration et une base de contenus.
- Une seule redirection vers https sans www pour les deux domaines
- Polices et icônes autorisées entre les deux domaines (en-têtes CORS)
Un agenda développé sur mesure
J'ai développé l'extension calend-o, qui ajoute deux widgets Elementor : un calendrier mensuel et une grille des prochains événements. Les stages se saisissent comme des contenus WordPress, avec dates, horaires et lieu, et le calendrier se remplit seul. Un clic sur un événement ouvre sa fiche, avec visuel, lieu et description.
Une bascule sans perte
Changer de domaine et d'arborescence fait perdre des visiteurs et du référencement si les anciennes adresses ne mènent plus nulle part.
- 12 règles de redirection 301 renvoient les anciennes adresses de mag-ma.org vers la rubrique correspondante du nouveau site.
- Une seule redirection vers https, sans www, pour les deux domaines.
- Fichier robots.txt et plan du site déclarés pour les moteurs de recherche.
Autres écrans
Cliquez sur une capture pour l'agrandir.
Technologies
- WordPress
- Elementor Pro
- Theme Builder
- Unlimited Elements
- Thème Hello enfant
- calend-o (maison)
- hidd-o (maison)
Étude de cas suivanteRessourceo