Refonte UX / UI du magazine Têtu

  • Ui Design
  • Ux design

1er média sur l'actualité LGBT, Le magazine têtu porte un regard masculin sur l'actualité et le monde qui nous entoure. A l'occasion de sa migration du format papier au format digital le magazine à fait appel à mes services pour la conception et le déploiement du site média en ligne. Nous avons ainsi conçu les différentes pages du service, avaec une attention particulière pour le menu distribuant les différents espaces, forums, photos, articles, posts. Le public étant particulièrement exigeant, urbain et branché, au courant des tendances, le Design devait être particulièrement soigné pour capter leur attention et retenir les lecteurs du service.

 

Design UX, conception du site média.

Nous voulions nous assurer d'offrir une expérience originale, différente des magazines concurrents. Nous avons alors abordé la conception du projet par un Benchmark des magazines actuels consultés par notre audience pour nous assurer d'offrir une expérience alternative. La consultation sur mobile était également un élément important, le magazine allait être consulté majoritairement sur tablettes et mobiles.

 

 

Design UI, identité visuelle du service.

Pour valoriser l'aspect magazine, nous avons utilisé une ambiance claire et épurée pour faire place à de larges visuels. Le design est sobre, claire et lumineux, les touches de couleur attirent l'attention sur les éléments importants: Titres, boutons, rollovers, call to actions, favorisant la progression dans le service et la découverte de nouveaux contenus. Un léger filtre noir fait ressortir les grands titres au-dessus des visuels. La typographie , ici choisie avec empattement, crée aussi la particularité des titres, de manière subtile.

 

 

 

Responsive design, consultation en mobilité.

Représentant un taux important de la consultation du magazine, il était essentiel que le service s'adapte en mobilité. Nous avons pour cela conçu l'expérience et les interfaces en "mobile first", la mise en page s'adapte en fonction de la résolution d'écran. Les éléments se réduisent et se ré-agencent automatiquement les uns en-dessous des autres. Nous avons fait en sorte que la consultation, l'ergonomie et l'accessibilité du magazine soit optimale pour ces supports et maximiser le trafic du magazine.

Navigation, distribution des pages.

Le menu permet de facilement et rapidement distribuer les pages principales du portail. Les quatre catégories principales: "News et opinions", "Lifestyle", "Feelgood" et "Photo" se déplient pour laisser apparaître les sous-catégories. L'utilisateur accède directement aux contenus qui l’intéressent. Le parcours du menu est intuitif, l'utilisateur peut facilement se projeter dans l'arborescence du portail.

Tetu---UI-Design---Creation-d'interface-03

Le menu gris anthracite en haut de page,  qui se détache du reste blanc et lumineux du magazine, se déplie pour laisser apparaître les 4 sites médias qui constituent le réseau têtu: "Têtu" le magazine, "So" la plateforme de discussion, "Tetu+" les évènements, "Mistergay" le site de rencontre. Ce menu est accessible sur toutes les pages  et permet de facilement basculer d'un portail à un autre.
Tetu---UI-Design---Creation-d'interface-04
Les flèches de navigation gauche / droite disposées sur les cotés des articles permettent d'avoir une pré-visualisation de l'article précédant ou suivant et ainsi glisser d'articles en articles spontanément.

Tetu---UI-Design---Creation-d'interface-01
"Lyfestyle" met en avant des portraits de célébrités. Au passage de la souris 4 vignettes apparaissent mettant en avant une photo verticale de la célébrité. Au passage de la souris la photo s'éclaire, invite au clic et à la découverte.
Tetu---UI-Design---Creation-d'interface-02

L'expérience qui se dégage du magazine est moderne et actuelle, s'adressant à un public gay particulièrement exigeant et sensible aux dernières tendances. Son aspect ludique et interactif créé l'adhésion, il donne envie d'utiliser le magazine au quotidien. Têtu renouvelle son image de marque comme la référence de l'actualité LGBT et incontournable de la communauté gay.