Share
Le design Web est essentiellement une évolution des principes et des théories créées au cours de l'évolution de l'impression. L'industrie du design a apporté de nombreuses techniques sur le Web, mais certaines ont été plus longues à maîtriser dans un environnement virtuel. Malheureusement, nous n'avons pas une seule plate-forme sur laquelle notre contenu apparaît; nous devons nous battre avec plusieurs navigateurs, systèmes d'exploitation et tailles d'écran.
Au fur et à mesure que le Web s'est développé, les principes de conception que nous observons ont également évolué. La conception basée sur une grille a augmenté ces dernières années, les concepteurs pouvant disposer leur site selon une grille à colonnes. Les systèmes de grille ont été un moyen très populaire d'organiser et d'aligner des éléments et d'ajouter un ordre général à une page en appliquant des proportions et un équilibre..
En nous appuyant sur notre connaissance de l’utilisation des proportions et de l’équilibre, on peut utiliser un autre principe de conception d’impression: la grille de base..
La grille de base est une technique utilisée pour améliorer votre typographie Web. Essentiellement, il aligne tout votre texte sur une grille verticale où le bas de chaque lettre est positionné sur la grille, comme si vous écriviez sur du papier ligné. Le résultat final est un corps de texte parfaitement organisé, avec une reconnaissance subconsciente de l'équilibre et de la congruence.
Comme je l'ai déjà dit, l'impression est un support statique. Concevoir pour un format d'impression vous permet de spécifier ce que tous vos téléspectateurs verront. Toutefois, en raison des différentes plates-formes sur lesquelles votre conception peut être interprétée sur le Web, votre CSS rendra inévitablement votre hauteur de ligne et d'autres valeurs typographiques différemment pour différents utilisateurs. Pour beaucoup de concepteurs, il s’agit là de devinettes et de prédire ce que l’utilisateur final verra.
De nombreux concepteurs d'impression utilisent des grilles de base conjointement avec leur suite de conception, qu'il s'agisse d'InDesign ou autre. Les grilles imprimées remontent au début des années 1200 et ne se limitent pas à la conception Web. En fait, tout, des grilles au nombre d'or (c'est-à-dire la plupart des théories basées sur les mathématiques), est partagé dans d'autres aspects de la vie, notamment l'architecture..
La grille permet de rassembler tous les éléments de design - caractères de type, photographie, dessin et couleur - dans un rapport formel; c'est-à-dire que le système de grille est un moyen d'introduire de l'ordre dans une conception. Un dessin délibérément composé a un effet plus clair, plus ordonné et plus réussi qu'une publicité faite au hasard. - Josef M? Ller Brockmann
Voyons maintenant comment nous créons notre grille de base.
Premièrement, nous devons définir une hauteur de ligne pour la grille de base basée sur un rapport avec notre taille de police; pour cet exemple, 1: 1.5 est une belle quantité qui nous offre une avance de 50%. Si nous avions une taille de texte de 12px, la hauteur de ligne (en utilisant ce rapport 1: 1.5) serait de 18px. 150% est une belle quantité qui nous offre un design qui sera facile à lire, mais cette valeur peut être différente. Cependant, vous devriez essayer de vous en tenir à une fourchette approximative de 130% à 160% lorsque vous considérez la hauteur de ligne.
Avant d'aller plus loin, vous devez savoir exactement comment fonctionne la propriété CSS line-height. La hauteur de ligne est la hauteur globale et collective de la ligne de texte, pas le texte lui-même. Cela fonctionne en ajoutant un rembourrage ci-dessus et en dessous du texte pour l’espacer. Si nous prenons du texte et le plaçons sur un arrière-plan réglé, nous verrons le texte placé entre les lignes, pas nécessairement sur celles-ci..
Pour simplifier les choses, supposons que notre texte ait une taille de base de 10 px. En nous en tenant à notre ratio approximatif, cela signifie que la hauteur de notre ligne sera de 15 pixels, bien que nous puissions varier cela. (Pour faire une note de côté, 10px est assez petit et je ne le recommanderais pas nécessairement dans la plupart des cas, mais je l'utilise ici uniquement pour faciliter les choses dans le département de mathématiques). Pour que divers éléments s’intègrent dans notre système de grille de base, nous devons les configurer dans notre CSS..
Avant de continuer, cependant, ces exemples supposent que vous utilisez une sorte de réinitialisation CSS. Sinon, les marges par défaut pourraient interférer avec le travail que nous faisons aujourd'hui..
Pour lancer les choses, une fois que nous avons configuré la hauteur de ligne, nous devons insérer une marge cohérente sous chaque titre et paragraphe. Puisque nous travaillons avec une grille de 15 pixels ici, nous démarrons les choses en écrasant la marge inférieure standard d’une balise de paragraphe (par défaut, il s’agit de 1em qui, dans ce cas, sera de 10 pixels) pour être identique à la texte. Cela crée une ligne vide proportionnelle sous chaque paragraphe qui est égale à la hauteur si le texte y réside.
p margin-bottom: 15px;
De même, pour les en-têtes, nous devons simplement continuer à obéir aux incréments de 15 pixels. En marquant simplement sur notre marge la hauteur de ligne de 150%, nous créons une pause similaire et cohérente..
h1 taille de la police: 20px; hauteur de ligne: 30px; marge inférieure: 15 px;
Avant d’aller plus loin, je tiens à noter que votre texte n’est peut-être pas toujours au rendez-vous, si vous en avez appliqué un à votre arrière-plan. Ne vous inquiétez pas cependant, tant que la hauteur de la ligne reste la même. Si votre texte flotte au milieu de vos lignes, vous pouvez facilement jouer avec vos marges, mais ce n'est pas nécessaire..
Ensuite, comment traitons-nous les listes? Premièrement, nous voulons appliquer notre marge standard de la même manière que nous avons appliquée à nos paragraphes. Cela donne aux pauses un niveau de cohérence avec le contenu.
ul, ol margin-bottom: 15px;
Cela commence à être facile maintenant! Si vous avez toujours une hauteur de ligne de 15 px définie ailleurs, vos listes s’intégreront parfaitement au reste du contenu..
Les images sont celles où cela commence à devenir un peu plus difficile. De préférence, nous voulons avoir la même cohérence dans nos marges afin que l'image soit traitée de la même manière que s'il s'agissait d'un bloc de texte. Cela signifie que vos images doivent être redimensionnées par multiples de la hauteur de votre ligne, ce qui est dans ce cas 15..
Dans mon exemple, l'image est flottante vers la droite et une marge de 15 pixels est appliquée sur le côté gauche et le bas. En plus de notre marge existante sous le paragraphe, cela nous a donné une marge constante égale au reste de notre grille de base..
img.left float: left; marge: 0 0 15px 15px;
Bien sûr, ce ne sont pas les seuls éléments que nous devons modifier pour nous conformer à notre nouvelle grille de base. La clé est de vous assurer que vous travaillez dans un incrément cohérent, afin que tout soit restreint à la même grille. Cela peut entraîner l'harmonie et l'équilibre devenir évident tout au long de votre page Web lorsqu'il est utilisé avec de grands corps de texte.
Voici notre exemple fini, une simple page Web contenant des paragraphes, des titres, une image et une liste. Si vous voulez sortir votre règle, vous pouvez, mais je peux vous assurer que tout suit la grille uniforme qui est basée sur notre typographie..
Nous venons tout juste de casser la surface de l'utilisation des grilles de base. Cela peut devenir beaucoup plus difficile lorsque vous commencez à essayer de les appliquer à des conceptions plus complexes, qui sont peu utilisées sur le Web. Cependant, cela est possible et peut aboutir à une conception équilibrée et proportionnelle qui peut contribuer à une meilleure expérience utilisateur final.
La grille de base est un excellent moyen d’ajouter de l’équilibre et des proportions à votre typographie. C'est l'une de ces mises en œuvre subtiles qui peuvent ajouter une sensation naturelle à vos conceptions. Dans le cas de la grille de base, notre typographie devient cohérente avec un espacement normalisé, ce qui lui confère une sensation harmonieuse..
Malheureusement, toutefois, nous devons encore lutter contre les incompatibilités de navigateur qui peuvent rendre notre rendu CSS différemment pour différents utilisateurs lorsqu'ils naviguent sur d'autres navigateurs, systèmes d'exploitation ou périphériques. C'est une tâche qui ne semble pas en devenir, bien que l'ajout d'une grille de base offre d'autres avantages. Par exemple, ce type de système de grille peut aider énormément lors de la mise à l'échelle et donc forcer un navigateur à restituer son CSS. Les grilles de base offrent un peu plus de flexibilité et encouragent le navigateur à faire les choses correctement.
Cet article a été plus court que d'habitude, mais c'est parce que les grilles de base n'ont pas grand-chose à expliquer ou à montrer comment les utiliser. La vraie magie vient lorsque le concepteur peaufine et teste pour s'assurer que sa grille de base fonctionne et, par-dessus tout, rend le design attrayant (un peu plus). Pour une alternative, lisez l'article de A List Apart sur ce sujet même. Jusqu'à la prochaine fois, bonne conception!
Accentsconagua