Blog

Retour aux articles

Best-practices UX de la page d’accueil de Figma

Partager

1376

Best-practices UX de la page d’accueil de Figma

Cet article est une analyse des best-practices UX de la page d’accueil de Figma, une solution collaborative de design de produits numériques : sites webs, app mobiles, applications pros. En 2024, Figma compte environ 100 millions d’utilisateurs.

Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.

Best-practices organisation générale

Capture d'écran de la page d'accueil de Figma

Gros titre avec grosse police de caractères

  • Inférieur à 3 lignes
  • Moins de 20 mots
  • Bien contrasté (noir sur blanc) pour une meilleure lisibilité
  • Icônes dans le texte qui animent le titre, mais diminuent la lisibilité

Principal bouton d’action immédiatement sous le titre

  • Incite directement à l’action
  • Guide l’utilisateur rapidement
  • Ne propose pas de s’inscrire, mais d’essayer, ce qui est moins freinant

Grand visuel attrayant

  • Donne une impression de richesse fonctionnelle
  • Animations sympas qui augmentent l’attractivité de la page
  • Certaines fonctionnalités sont déjà visibles à travers les animations

Présentation en quinconce classique

  • Favorise l’apprentissage de la lecture de la page
  • Titres courts pour accélérer la lecture et le repérage dans la page
  • Call-to-action pour chaque bloc afin de favoriser l’engagement
  • Très grands visuels pour augmenter l’effet d’immersion de l’utilisateur
  • Grands espaces entre les éléments de page pour réduire la charge cognitive
Capture d'écran complète de la page d'accueil de Figma

Best-practices apparence esthétique

Design enjoué et coloré

  • Favorise les émotions positives (mais attention à ne pas mettre trop de couleurs)

Animations partout

  • Augmentent l’attention de l’utilisateur
  • Permet d’expliquer plus facilement des concepts
  • Effet de dégradés colorés qui changent au scroll : effet super positif !

Attention à ne jamais trop mettre d’animations. Cela peut finir par nuire au guidage dans la page

Style graphique créé uniquement par la typographie et les couleurs

Wording / tone of voice

  • Vouvoiement pluriel : traduit l’approche collaborative du produit
  • Phrases d’engagement sur des bénéfices pour des équipes
  • Mise en avant d’une promesse : augmentation de la productivité, amélioration de la collaboration, raccourcissement des délais de production

Le wording de la page d’accueil s’adresse avant tout à des équipes de design.

Conclusion

Figma est un bon exemple de page d’accueil attractive et efficace.

  • La page n’est pas trop surchargée ce qui lui permet d’être parcourue rapidement du regard
  • Les titres sont assez gros et suffisamment espacés entre eux pour créer un rythme de lecture agréable
  • Les call-to-action ressortent bien et sont guidants
  • Les visuels sont colorés et animés, ce qui renforcent l’attractivité de la page. Cela renforce aussi l’état émotionnel de l’utilisateur dans un sens positif.

Vous avez aimé cet article ? On en a un autre pour vous sur l’onboarding de Figma.


-->

Nouveaux articles