Pourquoi trouve-t-on qu’un site est beau ?

Les détails visuels tels que la police, la couleur ou encore l’alignement créent une expérience conviviale et expriment, d’une certaine manière, les valeurs de votre marque.

Il est facile de regarder un design et de remarquer qu’il est beau. En revanche, il est plus difficile de déterminer pourquoi il l’est. Mais nous… On vous dit tout ! Et pour cela, nous analyserons trois interfaces utilisateurs afin d’examiner les principes de conception visuelle qui les rendent attrayantes 😉

Exemple 1 : Typographie et espacement

Prenons l’exemple de Medium.com, une plateforme américaine pleine de contenus intéressants. Cette conception utilise une grille, des espaces blancs et un système typographique afin de créer une expérience de lecture à la fois confortable et agréable.

L’attribut alt de cette image est vide, son nom de fichier est Capture-d’écran-2021-03-24-à-10.33.03-843x1024.png.

  • Alignement sur une grille. On remarque via le schéma ci-dessous une grille de colonnes. Cette grille de colonnes fournit des lignes d’ancrage verticales sur lesquelles différents éléments sont alignés. Dans la barre latérale, celle tout à gauche de l’écran, on remarque que les éléments (auteurs, commentaires, etc) sont alignés à gauche. Et cela permet de rendre le contenu plus net, et plus facile à lire. Le texte de l’article est également aligné à gauche sur une ligne de la colonne.

    En clair, lors de votre conception, il est important d’établir une grille de colonnes et de veiller à ce que l’alignement soit cohérent, entre les différentes pages de votre site, mais aussi entre les différents éléments. Ne perdez donc plus de temps… Définissez vos propres règles pour être le plus cohérent possible 😉

L’attribut alt de cette image est vide, son nom de fichier est Capture-d’écran-2021-03-24-à-10.40.04-1024x536.png.
  • Variations typographiques. Pour différencier les types de contenus, le site Medium utilise différents styles de caractères de la même police (gras, italique, souligné, etc) ainsi que des couleurs différentes, mais pas trop ! Un peu de noir, et un peu de gris, c’est le combo parfait. Eh oui, une trop grande variété de typographies, que ce soit le style ou la couleur, peut donner un aspect désordonné à votre site.

    La clé pour un design cohérent, c’est simple. Une variante = un objectif ! Prenons l’exemple des petites capitales “WRITTEN BY”. Ici, ce choix de typographie indique clairement qu’il s’agit d’un titre de section.
    L’attribut alt de cette image est vide, son nom de fichier est Capture-d’écran-2021-03-24-à-10.39.01-1024x452.png.
  • Espaces entre les lignes de texte. Il n’y a rien de pire que de lire un texte lorsque les lignes sont trop collées, n’est-ce-pas ? Il faut plisser les yeux et au bout de 2 min, on en a marre !  Ici, sur Medium, la distance entre chaque ligne de texte est légèrement augmentée par rapport à l’espacement par défaut qui est généralement supérieur de 2px à  la taille de la police. La méthode adoptée par ce site permet de créer un bloc de texte bien aéré et agréable visuellement.
    L’attribut alt de cette image est vide, son nom de fichier est Capture-d’écran-2021-03-24-à-10.46.12-1024x535.png.
  • Ajustement du crénage. Pour ceux qui se le demandent, le crénage consiste à agrandir ou diminuer l’espace entre des paires de lettres spécifiques. Vous l’avez sûrement déjà remarqué, notamment dans les titres, l’espace entre les lettres est plus apparent, notamment entre les lettres qui forment un angle. Dans l’exemple ci-dessus, l’espace entre les lettres a été légèrement comprimé. Si la plupart du temps, le crénage est ajusté automatiquement, pensez à le faire manuellement 😉
    L’attribut alt de cette image est vide, son nom de fichier est Capture-d’écran-2021-03-24-à-10.43.50-1024x538.png.

    Ces 4 points, qui peuvent vous sembler être des détails, sont très importants ! Ils rendent votre interface plus belle, tout en accomplissant l’objectif principal d’une page web : être facilement lisible et agréable.

La suite est à découvrir sur notre site partenaire, Wexperience, agence d’ergonomie Digitale.

cta-lire-suite-cc

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Robin Commerce

Article de : Robin Commerce

Del, Robin ou encore Abdel ... certains pensent que je souffre d'un trouble dissociatif de l'identité haha. Vif et agile, votre Capitaine a fait de moi son compagnon d'armes dans sa quête sur le web :)