Concevoir et construire avec le type de fluide et les échelles spatiales

À propos des auteurs

Trys Mudford ( @trysmudford ) est un développeur front-end qui se trouve à l'intersection entre la conception et l'ingénierie, aidant à traduire entre les deux les fonctions …
En savoir plus sur
James et Trys
↬

Il y a deux décennies, alors que nous nous embarquions dans notre voyage des rivages confortables et prévisibles de la conception d'impression à la mers ouvertes fluides et en constante évolution du World Wide Web, John Allsopp a encouragé l'acceptation du «flux et reflux des choses» . Dix ans plus tard, Ethan Marcotte a inventé le terme «responsive web design» amorçant un passage sismique des sites de bureau à largeur fixe – et de leurs homologues mobiles séparés – à des bases de code uniques de conception flexible.

Mais nous n'a pas embrassé le flux et le reflux. Pas vraiment. Au lieu de cela, nous nous sommes installés sur un système de points de rupture arbitraires et c'est là que l'expédition s'est terminée. Des «nombres magiques» rigides liés à des appareils du monde réel ont affecté notre CSS et dirigé nos processus de conception. Aujourd'hui, les développeurs reçoivent souvent une collection de maquettes pour mobile (320px), grand mobile (400px), tablette (768px), petit bureau (1024px) et grand bureau (1440px). L'effort déployé pour générer autant d'artefacts discrets est une utilisation inefficace du temps et des ressources.

De plus, avec autant de matériaux de référence uniques en jeu, les développeurs doivent souvent deviner la logique – le cas échéant – utilisée dans le processus de conception. Cela peut conduire à un nombre apparemment infini de valeurs similaires entrant dans la base de code, augmentant inutilement le poids du CSS et la complexité de la maintenance du projet. Cette convolution augmente de façon exponentielle avec le nombre de maquettes spécifiques aux appareils générées ainsi que le nombre de contributeurs de conception impliqués.

The Promise Of Utopia

Une façon de s'assurer que nos conceptions se sentent chez elles sur plus d'appareils est d'ajouter plus de points d'arrêt , permettant des ajustements de conception plus nuancés à plus de tailles d'écran. Cela vient avec le coût d'un processus de conception plus laborieux, plus de génération de maquettes, plus de code et plus de documentation.

Une autre façon est de se pencher sur la fluidité du support en reconnaissant cette limitation perçue comme le c'est vraiment un avantage. Au lieu de resserrer notre emprise en chargeant sur les points d'arrêt, nous pouvons lâcher prise, abandonner une partie de ce contrôle et permettre au support de partager la charge. Nous pouvons embrasser le flux et le reflux avec une approche plus fluide et systématique de nos fondements de conception.

Lors de conversations avec des clients et des collègues, nous avons eu du mal à articuler ces concepts quelque peu nébuleux. Pour concrétiser l'idée, nous lui avons donné un nom: Utopia . Un seul mot pour désigner une façon particulière de penser les fondamentaux de la conception Web responsive fluide. Voici les avantages tels que nous les voyons:

• Concevez et développez rapidement en utilisant une poignée de règles connexes, construisant le système, pas toutes les permutations de son contenu à des points d'arrêt arbitraires.
• Créez des contraintes sur mesure pour vos projets pour garantir des conceptions cohérentes et harmonieuses.
• Rationalisez la communication et la collaboration entre la conception et le développement.
• Visualisez l'invisible : Composez l'espace réactif, codifiez sa mise en œuvre et son comportement.
• Swap discordant point d'arrêt sauts pour une interpolation fluide, avec des échelles de type et d'espace adaptées par programme pour chaque taille d'écran.

Les origines de l'utopie

L'utopie est apparue au cours des années de travail au front de taille, la conception et la se développer dans des contextes d'agence et de produit. Nous avons repéré quelques modèles et pièges courants, et nous nous sommes progressivement concentrés sur une solution, en effectuant des itérations avec de vrais clients.

Nous avons commencé avec une simple calculatrice basée sur un tableur en 2018, mais communiquer les avantages d'une pensée réactive fluide était un défi. Un sprint informel à Clearleft au début de 2020 a abouti à utopia.fyi où nous avons publié certaines de nos réflexions à côté d'un calculateur d'échelle de type fluide .

Fluid Echelles de types

La composition avec des échelles modulaires n'est pas un concept nouveau. C’est un moyen mathématique éprouvé d’assurer des relations harmonieuses entre les tailles de caractères dans une conception. Mais là où les systèmes typographiques traditionnels dérivés de l'impression sont conçus pour fonctionner à des tailles de page spécifiques, Utopia peut déverrouiller une typographie élégante pour tous les appareils.

En définissant une échelle de caractères appropriée pour un petit écran et une autre pour un grand écran, nous pouvons laisser le navigateur interpoler en douceur entre les deux, en fonction de la taille actuelle de la fenêtre. Il en résulte un ensemble de tailles de caractères toujours en phase avec lui-même, sans définir manuellement les tailles pour plusieurs points d'arrêt.

En pensant en termes d'étapes plutôt que de valeurs nous permettons à l'ordinateur de calculer la valeur optimale tailles, plutôt que de les travailler laborieusement nous-mêmes. Cette façon de penser déclarative correspond au fonctionnement du CSS lui-même: nous disons au navigateur ce que nous voulons et le navigateur détermine comment le faire.

Cela crée également un langage partagé et personnalisé entre les concepteurs et les développeurs. Au lieu de faire référence à un changement de taille de titre de, disons, «1.687rem à 2.3125rem», cet ensemble d'options vous permet de dire: «Étape 2 à Étape 3». En ajoutant le frottement intentionnel des étapes nommées et en adoptant cette contrainte auto-imposée, nous pouvons nous prémunir contre un nombre infini de tailles de polices de nombres magiques infiltrant nos bases de code et nos conceptions.

Utopia encourage la curation d'un système suffisamment petit pour être conservé dans la mémoire à court terme, plutôt que d'un système si étalé auquel il faut constamment se référer.

Designing Avec Fluid Typography

Nous commencerons généralement un projet en définissant une police et une taille de corps de copie appropriées aux largeurs de fenêtre min et max. Les tailles exactes dépendent des polices, du style visuel, du contenu, de la mise en page et de l'audience d'un produit. Pour ce faire, nous expérimentons dans Figma des morceaux de copie réaliste du client, ainsi que toutes les informations sur la direction de conception que nous avons découvertes ensemble. À ce stade, nous sommes plus intéressés par la lisibilité, les longueurs de ligne, les hauteurs de ligne, la taille et le contraste de poids – tous les ingrédients qui se combinent pour créer une expérience de lecture appropriée.

Après cette expérimentation, nous aurons une bonne idée des échelles qui fonctionneront pour le projet et il est temps de visiter le Calculateur d'échelle de type Utopia .

Ici, nous allons mapper les tailles de police approximatives aux échelles de type mathématique, en tirant les valeurs dans Figma – manuellement, pour l'instant – pour confirmer qu'elles conviennent au contenu. [19659006] Vous pouvez en savoir plus sur la conception avec des échelles de type fluide sur le blog Utopia.

Développement avec la typographie fluide

Pour intégrer ces fondations de conception dans le code, le développeur visite la même URL en tant que concepteur. Ils peuvent exporter le CSS directement à partir de l'outil et le déposer dans un projet.

Utopia s'appuie fortement sur les propriétés personnalisées CSS et les verrous CSS . Cela a deux avantages: il est entièrement opt-in, et les valeurs peuvent être modifiées dans le navigateur.

Note d'accompagnement sur le maintien de la malléabilité de vos valeurs : Il s'agit d'une décision de conception cruciale dans le calculateur Utopia . Nous savons par expérience que toutes les valeurs sont sujettes à changement au fur et à mesure qu'un projet avance. La conception numérique est un processus fluide. Les outils de conception comme Figma sont incroyables, mais ils ne peuvent pas vous montrer comment vos polices seront rendues dans chaque navigateur sur chaque appareil. Le contenu change souvent au cours des projets. Les tests d'utilisabilité peuvent soulever des problèmes imprévus. Les parties prenantes émergent avec leurs propres préférences de conception. Souvenez-vous simplement du mantra: «Un produit numérique n'est jamais fini» et permettez au système de s'adapter, de changer et de grandir au fur et à mesure que vous travaillez. leur. Dans toute déclaration, plutôt que de définir une valeur de taille de police comme une unité statique (par exemple, px), nous nous référons à la taille de pas:

 h2 {
  font-size: var (- step-2);
}

Alternativement, en créant un petit ensemble d'utilitaires à responsabilité unique, nous pouvons créer des composants fluides avec une seule classe:

 .u-step-2 {
  font-size: var (- step-2);
}
 Titre 

Lecture recommandée : Échelles de type modulaire fluide CSS uniquement

Palettes d'espace fluide

L'espace est souvent créé ad hoc par les concepteurs et deviné par les développeurs. Utopia vise à résoudre ce problème en normalisant l'unité fondamentale de l'espace utilisée dans la conception et le développement. Cela crée une compréhension partagée et un ensemble commun de lacunes intentionnelles et fluides à utiliser par les deux disciplines. Le calculateur d'espace fluide est le dernier outil de la collection Utopia.

En prenant «l'étape 0» de l'échelle de type fluide comme unité de base, nous déployons un ensemble de multiplicateurs pour créer une sélection d'unités spatiales. Pour simplifier les choses, nous les appelons des tailles de T-shirt: (S) mall, (M) edium, (L) arge, etc. Grâce à l'unité de base fluide, ces valeurs se rétrécissent et augmentent subtilement en fonction de la taille de l'écran.

Là où de nombreux systèmes échangent des valeurs d'espace à des points d'arrêt arbitraires, Utopia a une autre approche. Chaque unité spatiale individuelle peut interpoler vers une unité différente entre vos points d'arrêt minimum et maximum. Hors de la boîte, Utopia crée des «paires en une seule étape» qui font monter un cran dans l'échelle des tailles (2XS → XS, XS → S, etc.), mais l'outil vous permet également de créer n'importe quel nombre de paires personnalisées.

Ces paires peuvent créer des pentes incroyablement raides (XS → 3XL), parfaites pour gérer l'espacement des lames de héros, ou même des pentes inversées qui deviennent plus petites à mesure que la largeur de la fenêtre s'agrandit (2XL → XS).

Conception avec un espace fluide

Dans Figma, nous allons créer un ensemble de composants d'espace pour des espaces de taille minimale et maximale. En utilisant les variantes nous pouvons facilement permuter entre chaque taille de T-shirt. Un plugin Figma qui automatise ce processus se trouve sur notre feuille de route.

En utilisant ces espaces comme guides, nous pouvons les placer entre nos composants pour assurer une cohérence visuelle. Nous avons constaté qu'après une courte période de temps, la poignée de valeurs spatiales se consacre à votre mémoire, et la présentation de conceptions conformes sans les guides spatiaux devient une seconde nature.

Nous avons construit une démo pour montrer comment cela se conjugue dans le navigateur et comment l'espace devient intentionnel avec Utopia.

Pour en savoir plus sur la conception avec une palette d'espace fluide sur le blog Utopia.

Developing With Fluid Space

Tout comme le ] outil typographique nous pouvons exporter le CSS directement à partir du calculateur d'espace et l'implémenter avec des propriétés personnalisées ou des classes utilitaires, comme ceci:

 .grid-of-two {
  affichage: grille;
  grille-modèle-colonnes: répéter (2, 1fr);
  grid-gap: var (- espace-s-l); // (S) 18px → (L) 44px
  margin-bottom: var (- espace-xs); // 14px → 17px
}

Avec une palette partagée d'espaces fluides nous avons constaté que nous n'avons plus besoin de maquettes de chaque élément à plusieurs largeurs de fenêtre. En tant que développeur utilisant Utopia, vous assumez désormais une partie de la responsabilité de la nuance de la conception réactive de votre projet. Ce système spatial vous permet de peindre l'espace fluide approprié sur votre interface comme bon vous semble.

Lorsque des composants spécifiques nécessitent des conceptions sur mesure sur des écrans plus petits, une maquette ciblée peut être créée. Un en-tête de site est un bon exemple. Cela permet au concepteur de passer son temps plus judicieusement, en se concentrant sur des problèmes de conception épineux, plutôt que de créer des maquettes de situations qui sont automatiquement résolues par Utopia.

Il n'est pas exagéré de dire que cette approche a révolutionné la façon dont nous développons pour le Web , et a rapidement augmenté la vitesse à laquelle nous pouvons transformer des conceptions plates en mises en page numériques harmonieuses, fluides et intentionnelles. Cela peut sembler peu intuitif au début, mais une fois que vous avez cliqué, vous ne voudrez plus revenir en arrière.

Lecture recommandée : Peinture avec une palette d'espace fluide

Utopia Dans le monde réel

Un des jalons clés dans le développement de l'utopie a été pendant l'engagement de Clearleft avec le Musée d'histoire naturelle. Nous avons travaillé en étroite collaboration avec l'équipe numérique pour réinventer le site Web Wildlife Photographer of the Year la représentation en ligne du plus grand concours du genre au monde.

Dans l'exposition physique, les photographies sont soigneusement arrangées , les informations de support magnifiquement composées et soigneusement positionnées. Nous nous sommes engagés au même degré de considération pour la version numérique. Travaillant avec cette collection d'actifs impressionnants, le travail du nouveau site Web était simple: «Faire de la photographie la star».

Cet état d'esprit imprégnait les fondements du design et se prêtait parfaitement à l'application de nos principes utopiques. Si l'objectif était d'afficher les images et le contenu associé de la meilleure façon possible sur chaque appareil, nous avions deux options. Nous pourrions soit saturer notre code avec des points d'arrêt fixes, soit accepter le flux et reflux, nous pencher dans le milieu fluide du Web et permettre à l'ordinateur d'adapter le contenu à son affichage.

Le résultat de ce projet était une incarnation numérique immersive de l'expérience physique, chaque image étant donnée l'espace pour respirer et se sentir en harmonie avec son environnement sur tout appareil. Vous pouvez en savoir plus sur le projet dans l'étude de cas et en savoir plus sur le podcast Clearleft .

Conclusion

Avec cette approche, chaque caractère et chaque espace dans chaque composant de chaque page est lié à une étape typographique ou à une taille d'espace. Bien que cette approche raccourcisse certaines décisions de conception pendant le projet, ce n'est pas un substitut à une bonne conception – il faut un concepteur expérimenté pour mettre en place les palettes de type et d'espace appropriées et les gérer au fur et à mesure que la conception évolue.

Que nous fabriquions un système de conception ou quelque chose de plus petit, les avantages d'une approche systématique l'emportent presque toujours sur les inconvénients. Selon la taille et la portée d'un projet, l'introduction d'un système peut ressembler à de la suringénierie. L'approche Utopia est conçue pour être aussi légère que possible, adaptée à une utilisation sur des projets de toutes formes et tailles.

(vf, il)