Espace documentaire entre les composants pour les concepteurs
Comment les relations spatiales entre les composants sont-elles documentées par les grands systèmes de conception? Ils ne semblent expliquer que l'apparence et le comportement des composants de manière isolée, et non les uns par rapport aux autres.
Par exemple, si j'ai un H1 suivi d'un paragraphe, je voudrais que la distance entre eux soit de 40 pixels. Sur une autre page, j'ai un H1 suivi d'une image, auquel cas je veux que la distance soit de 30 pixels.
Pour différentes combinaisons d'éléments, je veux définir différentes distances. Je veux documenter ces combinaisons afin que les concepteurs et les développeurs n'aient pas à le comprendre à chaque fois et qu'il y ait plus de cohérence entre les pages.
Pour les développeurs, cela pourrait être documenté dans css. Les concepteurs ne voient généralement pas cela. Comment ces règles doivent-elles être communiquées aux équipes de conception afin qu'elles utilisent l'espacement approprié entre les composants dans leurs conceptions?
Quelle est la meilleure méthode pour communiquer/documenter les règles spatiales entre les composants aux concepteurs?
C'est une excellente question qui met en évidence une lacune dans de nombreux articles et conversations sur la documentation de conception et les bibliothèques de modèles. Dans l'ensemble, ils sont centrés sur le concepteur visuel et concentrés sur atom et composants de molécule isolés. Pour être utiles dans une application pratique, la documentation de conception doit expliquer ce qu'il faut faire quand et pourquoi à travers une large gamme d'exemples différents.
Cet exemple H1 est parfait pour illustrer ce point. (J'écris délibérément des pseudo-styles et non des sélecteurs ou des attributs CSS valides parce que je suppose que cette question concerne la façon de communiquer les conventions, PAS la façon dont on peut techniquement atteindre les différents comportements conditionnels.)
H1 Headers
Notes: Use sparingly. Adjust white space according to adjacent design elements.
Font: Helvetica
Font Weight: Bold
Size: 28px
Line height: 32px
Bottom Margin:
IF (followed by paragraph text) THEN
15px and show a visual example
ELSE IF (followed by an image) THEN
30px and show a visual example
END
Letter spacing: 1px expanded
(Etc)
C’est mon 0,02 $. La documentation de conception est déjà un message dans une bouteille, mais sans exemples pratiques et explicites, elle oblige les gens à deviner ce qu'il faut faire.
** Modifier pour ajouter un exemple que j'ai trouvé **
Cet article fait un excellent travail de déballage l'utilisation de l'espace avec intention dans les systèmes de conception. L'auteur déconstruit certains éléments de conception basés sur des modèles (dans ce cas, des cartes avec du contenu) pour montrer les différentes règles conditionnelles qui sont utilisées:
De l'article:
La plupart des collaborateurs ne peuvent pas voir l'espace, l'une des principales raisons pour lesquelles il est appliqué de manière si arbitraire.
En résumé: la documentation de conception destinée à soutenir une réutilisation disciplinée des modèles doit être écrite dans cet esprit. Des systèmes conviviaux illustrent ce qu'il faut faire et lorsqu'ils utilisent des exemples pratiques et bien annotés.
Vous ne devez pas définir le remplissage et la marge dans le plus petit élément de votre système. Une propriété la plus importante d'un élément est les attributs uniques pour ce type d'élément, par exemple pour un en-tête (h1. H2 etc.) ou tout élément de texte, les attributs importants à communiquer sont la taille et la couleur du texte.
Vous devez définir l'espacement dans des situations plus complexes, où plusieurs élémets interagissent les uns avec les autres, appelons-les "composants".
Dans une application ou un site Web donné, vous auriez plusieurs composants avec des comportements différents, ces composants pourraient sembler très similaires avec de petites différences, vous devriez documenter chaque spécification de ces composants.
Dans votre cas, vous avez un composant de contenu avec du texte (text_content_bloc) et des composants de contenu avec une image (image_content_bloc), vous devez documenter ces blocs individuellement (s'il existe des différences visuelles comme le remplissage de h1)
Les systèmes de conception sont des organismes vivants, vous ne terminerez jamais un système et passerez au suivant, il a besoin d'entretien, d'itération et de nettoyage de temps en temps.
Quelques bons exemples de composants:
https://material-ui.com/demos/cards/
https://semantic-ui.com/views/card.html
PS: D'après mon expérience, les meilleurs systèmes sont les systèmes avec moins d'exceptions, si votre h1 a 100 rembourrages différents, vous devriez essayer de simplifier votre système, le rendre plus cohérent
Vous pouvez utiliser le combinateur frère adjacent
/* Paragraphs that come immediately after any image */
img + p {
font-style: bold;
}
Pour votre cas, vous pouvez ajouter une marge au paragraphe ou à l'image.
h1 + p {
margin-top: 40px;
}
h1 + img {
margin-top: 30px;
}
Il serait utile pour les concepteurs de voir une application visuelle et des exemples du modèle de conception. Vous pouvez expliquer comment l’espacement est dérivé (pourcentage de x élément, etc.) ainsi que la justification et le contexte d’utilisation.
Le CSS a une hiérarchie, lorsqu'il est appliqué correctement, le langage contient depuis longtemps ce que vous demandez.
Une combinaison de:
Sélecteurs CSS: https://www.w3schools.com/CSSref/css_selectors.asp
Et
Une compréhension de la hiérarchie CSS: https://en.wikibooks.org/wiki/Cascading_Style_Sheets/Applying_CSS_to_HTML_and_XHTML
Vous permettra de "cascader" vos styles à travers un projet, c'est aussi simple que d'ajouter un champ ID à vos formulaires et de verrouiller vos sélecteurs à des sections spécifiques ou que des sélecteurs de niveau supérieur affectent l'ensemble du site.
Pour aller plus loin, vous avez des modèles, des conteneurs/pages maîtres et des directives/contrôles utilisateur qui sont utilisés pour renforcer la cohérence (là encore d'un point de vue technique).
Je pense que cela revient à l'intention du langage/des systèmes de conception qui ont été créés et quelles sont les limites de la documentation.
Le plus grand obstacle à essayer de documenter des détails comme celui concernant l'espacement que vous avez souligné dans votre question est de pouvoir proposer une règle cohérente qui s'applique à tous les différents scénarios potentiels. Peut-être que lorsque vous assemblez toutes les règles d'espacement pour des composants individuels, cela ne se fait pas dans tous les cas, mais si vous créez trop de règles, il est probablement plus facile de fournir des directives générales et de laisser le soin au concepteur de les appliquer. d'une manière pratique sinon cohérente.
Vous serez surpris de voir à quel point certains systèmes de conception sont interactifs. Par exemple, le Carbon Design System est intégré à CodePen afin que vous puissiez réellement essayer de jouer avec le style et le personnaliser selon vos propres besoins.
D'autres systèmes de conception spécifient des directives générales pour la mise en page de l'application, comme le Clarity Design System afin que vous puissiez voir comment les principaux composants d'une page peuvent être disposés.
Je pense que les principales raisons pour lesquelles ces types de détails ne sont pas spécifiés sont:
- Ils peuvent restreindre la conception de la mise en page dans la mesure où les problèmes d'alignement et de positionnement deviennent problématiques (car les systèmes de grille ne sont normalement pas spécifiques aux pixels pour répondre à la taille de la page sur différents appareils).
- Ils peuvent être difficiles à entretenir en fonction du nombre de composants dont vous disposez et des combinaisons utilisées ou potentiellement utilisées, dont la plupart des systèmes de conception ont généralement un nombre raisonnablement élevé.
- Il peut être difficile de faire fonctionner les choses dans l'ensemble du système de conception lorsque les composants ne sont plus utilisés, remplacés ou combinés avec des composants hérités
Mais heureusement, c'est là que les concepteurs peuvent intervenir et aider à résoudre ces problèmes en travaillant avec les développeurs qui commencent par des modèles de page et des directives générales pour les composants, afin qu'il n'y ait pas trop d'ajustement à faire pour le développeur.
En termes d'effort par rapport aux avantages, je pense que les systèmes de conception existants ont la bonne approche et le bon équilibre en ce qui concerne le niveau de détail spécifié dans leur documentation.
Laissons de côté CSS et parlons de la conception visuelle. Je suppose qu'un site Web comporte un nombre raisonnable de types de page: destination, description du produit, tableau de bord, etc.
une. Inclure les informations de distance dans le modèle de page. Je voudrais créer quelques pages de modèle, qui montrent la distance spécifique entre le H1 et l'image/le texte. Par exemple, la page de destination peut avoir 4x entre le H1 et l'image et 2x pour le texte.
b. Incluez les informations de distance dans le modèle d'élément. Spécifiez la marge supérieure de l'image pour chaque taille d'image. Je suppose qu'il devrait y avoir des tailles d'image spécifiques à la mise en page, par exemple hero-image, produit-principal, produit-secondaire, etc. Dans ce cas, je créerais un groupe composé d'une image et d'un rectangle transparent au-dessus, il sera donc facile de construire la maquette à partir du modèle prédéfini blocs.