- Framework UI open source qui résout les problèmes de symétrie et de proportions, avec une structure où tous les éléments dérivent du nombre d’or
- Corrige automatiquement l’équilibre visuel et la sensation d’espace dans les boutons, cartes, champs de saisie, etc., afin de préserver des proportions naturelles
- S’appuie sur un facteur d’échelle global pour effectuer des calculs de proportions précis au sous-pixel près et garantir une harmonie cohérente
- Grâce à un panneau de contrôle des couleurs modulaire, il permet un aperçu des couleurs en temps réel et l’ajustement des thèmes, avec des réglages détaillés pour la typographie, les matériaux, la mise à l’échelle, etc.
- Se distingue comme un outil capable d’offrir une qualité visuelle très aboutie dès l’étape MVP, en améliorant le niveau de finition du design initial
Présentation de LiftKit
- LiftKit est un framework UI open source qui résout les problèmes de symétrie
- Son objectif principal est d’ajuster automatiquement l’équilibre visuel entre les composants de l’interface
- Il est au stade « Extremely Early Access », une version initiale et expérimentale
- Toutes les proportions du framework dérivent du nombre d’or (golden ratio), de sorte que les marges, tailles de police, rayons de bordure et autres éléments sont rendus de façon harmonieuse
- Il utilise un unique facteur d’échelle global (global scale factor) pour calculer les proportions avec une précision au sous-pixel près
Principaux composants et fonctionnalités
- Le composant bouton corrige automatiquement les déséquilibres de padding visuel qui apparaissent lorsqu’une icône est incluse
- Il ajuste dynamiquement le padding selon la taille de police afin de conserver l’équilibre gauche-droite
- Le composant carte propose la propriété
opticalCorrection, qui compense les déséquilibres d’espacement causés par la hauteur de ligne (line-height) du contenu
- Le champ de saisie (Input) adopte une conception des espacements basée sur le nombre d’or, pour un rendu qui laisse « respirer » l’interface
Proportions et satisfaction visuelle
- LiftKit utilise un système de proportions dérivé d’un facteur d’échelle unique afin de produire des proportions « oddly satisfying »
- Tous les composants sont calculés avec une précision au sous-pixel (subpixel accuracy), ce qui minimise les légers déséquilibres visuels
- Cette approche procure une impression de naturel et d’harmonie que l’utilisateur perçoit sans toujours pouvoir l’expliquer
Contrôle des couleurs et des thèmes
- LiftKit propose un panneau de contrôle des couleurs modulaire (modular control panel)
- Il peut être ajouté au fichier en cours de travail pour permettre un aperçu des couleurs en temps réel
- Il prend en charge des réglages variés, depuis de subtils changements de teinte jusqu’à des aplats de couleur plus marqués
- En plus des couleurs, les éléments suivants peuvent être ajustés directement en CSS
- Typography : contrôle typographique global fin, au-delà du simple choix de famille de polices
- Custom Materials : création de nouveaux matériaux à partir de préréglages comme glass, flat ou rubber
- Scaling : mise à l’échelle conjointe de l’ensemble des éléments, pas seulement du texte mais aussi des espacements
- Component-specific configs : possibilité d’ajuster indépendamment l’apparence de chaque composant
Détails soignés et qualité du design
- LiftKit est conçu pour offrir une qualité visuelle très aboutie dès l’étape MVP
- « Make MVP’s that don’t look like MVP’s »
- Il fournit par défaut des espacements perceptuellement précis (perceptually accurate spacing) afin de maximiser la sensation d’équilibre perçue par l’utilisateur
- Ces détails minutieux produisent un résultat qui « est difficile à expliquer, mais paraît meilleur »
3 commentaires
Il y a un comparatif avant/après sur la landing page, et les deux ont l’air bien...
En général, on n’utilise pas plutôt une seconde majeure (1,125) que le nombre d’or… ?
Avis sur Hacker News
Lors de la conception de Chrome, le minimalisme était au cœur de l’approche
À l’époque, les écrans étaient petits, donc beaucoup de temps a été consacré à réduire l’espace vertical
Dire que le ratio entre la barre d’onglets, la barre d’outils et la barre de titre relevait du nombre d’or limitait les débats, mais en réalité ce n’était pas du tout le nombre d’or
Des éléments comme la lumière, la couleur, l’arrondi et l’intensité visuelle sont bien plus importants
En réalité, avec quelques ajustements, on peut faire correspondre n’importe quoi au nombre d’or. Ce genre de chose marche particulièrement bien avec les gens sensibles à ce côté « spirituel »
Même si les écrans sont plus grands aujourd’hui, je n’ai toujours pas envie de gaspiller de l’espace
Au final, cela semble surtout être une question de goût
Ils sont utiles en impression, mais en numérique ils nuisent plutôt à la lisibilité
Forcer les icônes à avoir toutes la même forme ou supprimer les couleurs réduit aussi leur identifiabilité
Je suis le créateur de LiftKit
Ce projet en est encore à un stade très précoce, et je le développe seul comme hobby
C’est open source et gratuit → lien GitHub
La plupart des retours sont déjà en discussion dans ce fil Reddit
La priorité actuelle est de le reconstruire sur des primitives Radix et d’améliorer la documentation
On peut aussi voir une vue d’ensemble dans cette vidéo YouTube
Le fait d’avoir réellement mis en œuvre ce « système de design parfaitement cohérent » dont rêvent la plupart des développeurs front-end est remarquable
Il est difficile de faire confiance à un framework UI incapable de rendre des composants dans sa propre documentation
J’ai essayé d’appliquer le nombre d’or dans une app iOS, et j’aimerais bien que tu partages ton processus de création
Pour montrer des captures avant/après, il vaudrait mieux permettre une bascule instantanée par bouton plutôt qu’un curseur à glisser
À chaque clic, l’œil perçoit directement la différence
Référence connexe : réponse Quora d’Andrei Herasimchuk
Quand on essaie de le déplacer de gauche à droite, ça glisse de haut en bas. Merci pour le retour, je vais clairement corriger ça
Exemple vidéo : LUTLab Viewer
Au début, j’ai cru que ce site était une parodie
J’ai été surpris de voir que c’était réel, et les composants semblaient mal centrés, avec un poids visuel déséquilibré
En pratique, il faut ajuster de quelques pixels pour que cela paraisse naturel
À propos de « optical correction none/top », je me demande si l’alignement est fait en mesurant directement la hauteur des majuscules, ou si ce sont simplement les métriques de police qui sont utilisées
Il est difficile de faire confiance aux valeurs internes d’une police, et les glyphes réels ne les suivent pas forcément
C’est ce genre de choses qui fait du travail typographique un cauchemar
Il est difficile de faire confiance à un framework UI qui montre tous ses composants uniquement sous forme d’images
J’ai cherché le prix, et il n’y avait que « Contact Sales », avec obligation d’utiliser directement le calculateur
En entrant 10 pages de niveau supérieur + 5 sous-pages, je suis tombé sur 16 500 $, ce qui m’a surpris
Est-ce que c’est toi, par hasard, qui as envoyé le formulaire avec « FUCK_YOU@DUMB.COM » ?
Il y a un point que la plupart des bibliothèques UI oublient
Quand des boîtes à coins arrondis sont imbriquées, il faut augmenter le
border-radiusde la valeur de l’espacementSinon, cela donne une impression visuelle de décalage
Exemples : composant Snackbar, capture d’écran de la disposition des onglets de Chrome
Il existe aussi un article de recherche à ce sujet → lien vers l’article PMC)
Dans la présentation de LiftKit, il y avait une phrase disant que « tous les éléments dérivent du nombre d’or pour créer une harmonie parfaite », et je ne sais pas si c’est ironique ou sincère
On dirait qu’il y a là une harmonie sensible au-delà de la théorie