Introduction à la proportion

La proportion a une longue histoire de définition de la beauté dans l’art et le design. Les anciens Égyptiens utilisaient un système de grille pour leurs œuvres murales, contribuant à établir l’échelle, la proportion et à illustrer la hiérarchie. Les Grecs anciens étaient fascinés par les proportions du corps humain. Le nombre d’or a été utilisé pour créer des proportions « parfaites » pour la Bible de Gutenberg. Les exemples de proportions soigneusement étudiées ne manquent pas.

Aujourd’hui, la proportion est un principe de conception puissant qui contribue à la cohérence, à la hiérarchie, au rythme et à la beauté générale du design. Dans cette leçon, nous allons discuter de la façon d’utiliser la proportion dans la conception de l’interface utilisateur.

Taille vs Échelle vs Proportion

Pour tirer parti de la proportion dans la conception d’IU, nous devons d’abord comprendre les différences entre la taille, l’échelle et la proportion. Ces trois termes sont liés, mais il existe des distinctions claires à prendre en compte.

La taille est les dimensions réelles d’un élément, souvent mesurées en px, pt, em, rem, etc.

Par exemple, la taille de ce logo est de 75px de hauteur et 275px de largeur.

L’échelle est les dimensions relatives d’un élément, souvent mesurées par des pourcentages ou des multiples.

Par exemple, un élément peut être mis à l’échelle pour être plus grand ou plus petit que sa taille d’origine.

La proportion est la relation harmonieuse entre deux ou plusieurs éléments d’échelle.

Par exemple, si un élément augmente en taille, les autres éléments doivent également augmenter au même rythme pour rester proportionnés.

Proportion dans le design d’interface utilisateur

Comparer un logo proportionné et disproportionné est une chose, mais vous vous demandez probablement « Comment cela fonctionne-t-il pour le design d’interface utilisateur ? ». Après tout, avec des tailles d’écran et des appareils différents, il n’est pas possible de conserver une IU proportionnée, non ? La réponse à cette question est « Oui et non ».

Les IU comprennent généralement une combinaison d’éléments statiques et fluides.

  • Les éléments statiques restent de la même taille, quelle que soit la taille de l’écran.
  • Les éléments fluides s’échelonnent à un pourcentage spécifié de son conteneur.

Par définition, comparer des éléments statiques à des éléments fluides ne donnerait jamais un design proportionné, car ils ne s’échelonnent pas au même rythme. Cependant, les utilisateurs ne changent généralement pas d’appareil lorsqu’ils expérimentent votre interface utilisateur.

Avec cela en tête, il est possible d’utiliser la proportion dans la conception de l’interface utilisateur. Cependant, il se peut juste que ce ne soit pas de la façon dont vous vous attendez.

Unités de mesure dans la conception d’IU

Vous avez probablement entendu le terme « pixel » utilisé le plus souvent comme unité de mesure pour les produits numériques. Cela était généralement acceptable jusqu’en 2010, date à laquelle Apple a introduit l’écran Retina.

L’écran Retina a changé la façon dont nous pensions à la « taille » en emballant deux fois plus de pixels par pouce carré de l’écran. Alors que la taille d’un élément entre un Retina et un non-Retina semble être la même, le nombre total de pixels qui composent cet élément est bien différent. Par exemple, un bouton qui fait 48px de hauteur sur un écran ordinaire ferait maintenant 96px de hauteur sur un écran Retina en raison de la densité de pixels.

Depuis, de nombreux écrans à haute densité de pixels (HPD) sont devenus disponibles sur de nombreuses marques et appareils différents. Heureusement, les écrans HPD sont généralement définis par le nombre de pixels supplémentaires qui tiennent par pouce carré par rapport à l’écran standard à densité de pixels 1X.

Par exemple, la plupart des écrans peuvent être décrits comme ayant une densité de pixels 1X, 2X ou 3X.

Le terme « pixel » est encore communément accepté pour décrire la taille d’un élément. Cependant, pour éviter toute confusion, de nombreux concepteurs préfèrent utiliser le terme « point » ou « pt », qui décrit la taille, indépendamment de la densité de pixels de l’écran.

Pour le reste de cette leçon, nous utiliserons les termes « pt » et « px » de manière interchangeable comme unité de mesure pour décrire les relations entre les éléments de notre conception.

Le système de grille 8pt

Lorsque l’on travaille avec un logiciel de conception, comme Illustrator, Photoshop, Sketch, XD, Figma, etc. il est très courant pour les concepteurs d’utiliser des grilles ou des colonnes pour les aider dans leurs efforts de conception. De nombreux principes de conception discutés dans ce cours peuvent être réalisés à l’aide de grilles ou de colonnes, il n’est donc pas surprenant qu’ils soient un outil populaire dans la boîte à outils du concepteur.

Cependant, il y a une stratégie particulière, qui fonctionne exceptionnellement bien pour la proportion. Cette stratégie est connue sous le nom de 8pt Grid System.

Le 8pt Grid System a été introduit pour la première fois par la spécification Material Design de Google. Heureusement, il est assez facile à comprendre. Essentiellement, vous souhaitez utiliser une grille composée de carrés de 8 x 8 pt. Lorsque vous concevez au-dessus de cette grille, vous voudrez vous assurer que tous les éléments s’accrochent à la grille.

Il en résulte des éléments dont les dimensions sont toujours divisibles par 8. En concevant de cette façon, il est facile de garder les éléments proportionnés, tout en créant un sens du rythme vertical dans tout le design.

Pourquoi 8 points ?

Le système 8 points est le plus largement adopté pour deux raisons principales :

  • Les dimensions d’écran les plus courantes sont divisibles par 8, ce qui rend vos conceptions très nettes et claires sur la majorité des appareils (pas de pixels divisés).
  • La taille de police de base recommandée sur le web est de 16px. Cela permet aux développeurs de mettre à l’échelle les éléments d’une page Web en unités REM tout en restant fidèle au système de grille.

Dans l’ensemble, il y a plus d’avantages à utiliser 8 points par rapport à tout autre nombre pour la grille. Cependant, vous pouvez utiliser un nombre tel que 10pt ou 12pt si cela vous convient mieux.

Pourquoi pas 4 points ?

La spécification Google Material Design RECOMMANDE d’utiliser 4pt pour les « petits composants, tels que l’iconographie et la typographie. » Cependant, la majorité des éléments d’interface utilisateur peuvent toujours être gérés par le système 8pt, il est donc plus populaire pour commencer.

Le Golden Ratio

Le GridSystem 8pt a ses avantages évidents dans la conception d’interface utilisateur, mais si vous faites une recherche rapide sur Google pour « Proportion in UI Design », vous serez accueilli avec une première page pleine de résultats concernant le Golden Ratio.

Le Golden Ratio est de 1:1,618 et est considéré comme l’intersection des mathématiques et de la beauté esthétique. De nombreux concepteurs ignorent complètement les systèmes de grille en faveur de la création de proportion avec le Golden Ratio à la place.

Il y a beaucoup d’exemples de la façon dont le Golden Ratio a été utilisé pour tout, de la Bible de Gutenberg à la conception de logos modernes en passant par des occurrences dans la nature. Cependant, il y a d’autres personnes qui croient que la beauté du nombre d’or est tout simplement un mythe.

Malgré tout, on ne peut nier que beaucoup sont épris par le nombre d’or, donc il vaut certainement la peine d’être mentionné dans cette leçon.

Utilisation du nombre d’or dans la conception de l’interface utilisateur

Dans la leçon 4 de ce cours, nous avons discuté qu’une conception ne devrait pas avoir plus de 3 à 4 niveaux de hiérarchie dans une section particulière de l’interface utilisateur. En gardant cela à l’esprit, vous pouvez appliquer le ratio d’or dans votre conception en suivant ces étapes simples :

Définissez la hauteur d’un rectangle et multipliez ce nombre par 1,618 pour trouver la largeur. Cela crée un « rectangle d’or ».

Dans l’exemple ci-dessus, notre nombre de départ est 350pt, mais vous pouvez utiliser le nombre que vous souhaitez.

Divisez votre rectangle d’or en carrés parfaits. Chaque carré parfait donnera lieu à un nouveau rectangle d’or plus petit.

Continuez à diviser le rectangle d’or jusqu’à ce que vous ayez 3-4 carrés parfaits de tailles différentes.

Utilisez la taille de chaque carré comme un « placeholder » pour aider à briser votre disposition et communiquer la hiérarchie dans votre design.

Dans l’ensemble, le résultat est un design esthétique et proportionné. Jetez un coup d’œil à cet exemple de Prototypr.io.

Démarrer avec des contraintes

Maintenant que nous avons couvert quelques méthodes pour établir la proportion dans la conception d’interface utilisateur, discutons de quelques excellents points de départ. En commençant par les contraintes, il est plus facile de construire votre IU autour de ces contraintes.

Mobile First Design

L’expression « Mobile First » a été inventée par Luke Wroblewski dans son livre du même titre. Le terme a gagné en popularité auprès des concepteurs comme moyen de combattre l’envie de fourrer plus de choses dans une interface utilisateur simplement parce qu’il y avait suffisamment d’espace pour le faire.

En se concentrant d’abord sur la conception mobile, les concepteurs doivent contourner les contraintes des appareils mobiles et se concentrer sur ce qui compte vraiment. En conséquence, l’expérience de l’utilisateur reste cohérente entre les appareils, car l’objectif principal de l’interface utilisateur reste le centre d’attention.

Taille de la police

Comme mentionné précédemment, la taille de la police par défaut pour le corps du texte sur le Web est de 16px pour la plupart des principaux navigateurs. Tout ce qui est plus petit que cela peut déclencher un comportement de zoom inattendu sur les appareils mobiles Apple. Par conséquent, il est généralement recommandé de laisser 16px comme taille de police de base et de spécifier vos tailles de police restantes (titres, petit texte, légendes, étiquettes, etc.) en conséquence.

Nous pouvons définir ces tailles de police en gardant à l’esprit la proportion en suivant la spécification de conception de Google Material et en choisissant des tailles avec des incréments de 4pt, comme le guide de style de Bootstrap pour la taille de police.

Note : l’incrémentation de votre taille de police par le nombre d’or n’est pas recommandée car les différences entre chaque taille de police seraient beaucoup trop importantes. Par exemple, en partant d’une taille de police de base de 16 et en multipliant chaque niveau de titre par 1,618, on obtiendrait un titre H1 de 177,4 pts, ce qui serait très difficile à lire.

Taille du bouton

Un autre facteur limitatif à prendre en compte est la précision de la méthode de saisie qui est utilisée sur votre conception. Dans ce cas particulier, nous faisons référence aux doigts, aux pouces, aux curseurs et aux stylos.

Les doigts et les pouces sont beaucoup plus larges et moins précis que les curseurs ou les stylos. En gardant cela à l’esprit, il est important de s’assurer que les tailles de vos boutons, entrées, icônes ou autres points de contact sont choisies avec soin pour tenir compte de ces limitations.

Le Material Design de Google recommande que les points de contact sur mobile ne soient pas moins de 48pt en hauteur et 48pt en largeur avec pas moins de 8pt entre eux.

La largeur du contenu

Le contenu est fluide, ce qui signifie qu’il remplit autant d’espace horizontal et vertical qu’il le peut. Malgré cette caractéristique, il est de bonne pratique de définir une largeur minimale et maximale pour votre contenu.

Une largeur minimale de contenu peut être déterminée par la largeur minimale de l’écran que votre conception supportera. La plus petite résolution d’écran que la plupart des concepteurs prennent en charge est de 320px (c’est à 1X) de large. Cependant, vous devriez choisir votre largeur minimale en vous basant sur les données réelles des utilisateurs, si vous êtes en mesure de les obtenir. Google Analytics est un bon endroit pour rechercher ce type de données.

Bien que la largeur du contenu puisse remplir autant d’écran que celui qui lui est donné, il n’est généralement pas recommandé de permettre à votre contenu de s’étendre sur plus de 52 caractères par ligne. Cela suggère que la largeur maximale de votre contenu peut être déterminée en utilisant le texte du corps réel à sa taille de police normale et en trouvant une largeur de contenu confortable qui correspond à cette plage.

Conclusion

En conclusion, la proportion est un principe de conception utile. Malgré la présence d’une combinaison d’éléments statiques et fluides, il est toujours possible d’obtenir une interface utilisateur proportionnée en utilisant un système de grille de 8pt, le nombre d’or ou une autre méthode. Lorsque vous commencez à définir les dimensions des éléments, il est courant de commencer par vos contraintes, telles que le périphérique, la taille de la police, la taille du bouton et la largeur du contenu. Une fois que vos tailles de base sont définies, il est beaucoup plus facile de mettre les éléments à l’échelle en conséquence.

La prochaine leçon
Principes de conception : Espace blanc

La leçon précédente
Principes de conception : Emphasis

Feedback

Comment cette leçon peut-elle être améliorée ? Veuillez laisser vos commentaires en bas de page!

.