Brief
Contrairement à la plupart des autres magazines musicaux en ligne, Sourdoreille présente la particularité d’être emprunt d’esprit critique, il ne s’agit pas seulement de présenter l’information de manière simpliste.
Nous avons traduit ce côté impertinent et décalé, propre au site, par des des décrochages, des jeux de typographie, des chevauchements d’éléments et des animations tout en conservant la plus grande clarté d’information possible.
Hyper canon le nouveau site de @Sourdoreille http://sourdoreille.net applaudissements ! PencilKz Mathias Riquier
Ils l'ont fait
Beaucoup de personnes ont travaillé sur ce projet, voici ceux qui y ont pris part chez nous
-
Stéphane Villareal -
Jérémy Petrequin -
Priscillien Gac -
Charlotte Graff
Récompenses
Idée
Sourdoreille se distingue par son esprit critique. pour ce magasine, il ne s’agit pas seulement de présenter l’information de manière simpliste.
Nous avons traduit ce côté impertinent et décalé, propre au site, par des décrochages, des jeux de typographie, des chevauchements d’éléments et des animations tout en conservant la plus grande clarté d’information possible.
UX / Design
Ce projet a commencé par un redesign du logo et la création d’une charte dans des couleurs assez vives et contrastées. Des animations permettent de compléter l’ensemble rendant ainsi le site attrayant et dynamique. Il retranscrit maintenant au mieux la fraicheur d’esprit de Sourdoreille !
Pour mettre en lumière les visuels de la homepage et du site en général, nous avons adopté des visuels fullscreens qui permettent de donner du rythme à la grille et donc à la lecture.
Pour la homepage de ce magazine, nous avons fait le choix d’une grille facilement administrable pour permettre aux rédacteurs de la composer comme ils le souhaitent en fonction de leur contenu, avec notamment différentes zones de push.
Enfin, le média fêtant ses 10 ans, nous avons choisi de valoriser les anciens contenus grâce à la machine à remonter le temps. En bas de la homepage, celle-ci pioche des articles quelques années en arrière dans les archives, le même jour. Merci Marty McFly !
Code
La refonte du site est passée non seulement par une refonte totale du thème, mais aussi par un gros retravail de l’architecture WordPress et du backoffice, de manière à coller aux nouveaux partis pris décidés en UX/UI, que ce soit en terme d’arborescence, de catégorisation, ou encore de mise en page des articles.
Le développement a commencé par un import/re-travail/re-catégorisation automatique de tous les contenus existants, puis s’est accompagné d’une réintégration continue des nouveaux articles de la production à la préproduction pour ne pas perturber le travail de l’équipe et ne pas leur imposer une double saisie.
Cette nouvelle version nous a permis de mettre en place des nouveaux articles « augmentés ». Un des enjeux a donc été de proposer un outil backoffice qui permettait de créer aussi facilement des petits articles simples, comme des plus imposants, avec une mise en page plus complexe en y intégrant tout type de média.
Un grand soin a été apporté au développement multi-supports, dans le but de proposer l’expérience de lecture la plus confortable possible sur desktop tout en disposant d’une navigation extrêmement fluide sur mobile.
