Share
L'alignement est l'une de ces choses qui vont de pair lorsque vous travaillez avec des systèmes de grille. Le sujet de l'alignement ne consiste pas simplement à choisir si vous souhaitez aligner du texte ou des images à gauche ou à droite d'un dessin (bien que ces décisions aient toujours de l'importance), nous utilisons plutôt l'alignement pour améliorer nos dessins. Un alignement correct de vos conceptions les rendra plus attrayants sur le plan visuel et facilitera également la numérisation d'une page par les utilisateurs, offrant ainsi une expérience de lecture plus sereine..
Tous les éléments de votre conception devront être alignés d'une manière ou d'une autre, qu'il s'agisse de texte brut sur votre page, d'images mélangées au texte (ou même d'images d'en-tête ou de héros), de vidéos, de boutons et d'appels à actions, des liens (dans le texte ou dans des modules tels qu'une section de navigation) ou tout autre élément que vous pourriez avoir.
Les grilles vous aideront à résoudre les problèmes d'alignement ou les décisions dans votre conception, mais nous devons nous concentrer ici sur la manière dont les différents éléments, groupes d'éléments ou modules particuliers de votre conception fonctionnent ensemble. Depuis le début, je souligne l’importance d’une expérience utilisateur cohérente, et l’alignement correct est l’un des éléments vraiment importants qui peuvent aider à améliorer une expérience pour l’utilisateur..
L'alignement nous permet également de prendre des décisions éclairées quant à l'emplacement des éléments et à la manière dont ils interagissent. La création d'un bon alignement comble le fossé visuel entre chaque élément de votre conception et nous aide à créer des relations entre les éléments que nous avons. Sinon, nous aurions une conception qui aurait des blocs de texte et des images un peu partout, ce qui n'aurait aucun sens sans structure..
Comme expliqué dans les articles précédents sur la grille, il semble que beaucoup de gens n'aiment pas les grilles parce qu'elles les trouvent restrictives; qu'ils écrasent souvent les chances de créativité dans un dessin.
C'est totalement compréhensible. Les grilles sont un ensemble de colonnes et de lignes qui nous aident essentiellement à créer des blocs; CSS place généralement l'élément dans un arrangement de boîte. Cependant, il peut être difficile de connaître le moment opportun pour rompre avec notre réseau..
Tous les éléments de votre site Web ne doivent pas nécessairement être alignés. Parfois, en fonction de votre conception ou de votre façon de travailler, cela peut réellement étouffer la créativité. Au lieu de cela, pensez à comment vous pouvez mélanger vos alignements. De cette façon, vous vous assurez toujours que chaque élément ou module de votre site Web est régi par un motif. Cependant, en mélangeant les alignements, vous vous assurez que vous créez toujours quelque chose présentant un intérêt visuel qui incitera vos utilisateurs à explorer le site Web..
Mélanger des alignements signifie également que vous pouvez jouer un peu plus avec les dispositions et les grilles - au lieu d'utiliser une grille à 6 colonnes, pourquoi ne pas également introduire une autre grille avec laquelle vous pouvez superposer - telle qu'une grille à 4 colonnes.
Un exemple de superposition de grille - six colonnes avec une disposition de quatre colonnes superposée. App Gridset intégré. Alors que vous n'êtes pas complètement en rupture avec votre grille, vous introduisez plutôt une nouvelle grille à partir de laquelle vous pouvez travailler, offrant encore plus d'options d'alignement et de disposition dans vos conceptions..
Mélanger des alignements ne signifie pas simplement que vous introduisez de nouvelles grilles, colonnes ou extras dans votre structure. Utilisez plutôt votre grille actuelle pour mélanger les éléments alignés sur les colonnes. Par exemple, vos éléments d'en-tête peuvent être alignés sur les bords des première et dernière colonnes, mais vous pouvez ensuite décider d'aligner le corps de votre corps principal sur les première et dernière colonnes. Ce qui est génial, c’est qu’une grille vous offre un nombre presque infini d’options d’alignement, même avec quelque chose d'aussi petit qu'une grille de 4 à 6 colonnes..
Mélanger des alignements est un moyen de garder vos utilisateurs intéressés et alertes lors de la navigation sur un site Web. Au lieu de garder les éléments similaires, il introduit un autre niveau de focalisation sur les éléments de votre conception, aussi inconsciemment que cela puisse être..
Les principales options d’alignement de votre texte sont très similaires à celles disponibles en CSS: gauche, droite, centré ou justifié. Très explicite, vraiment; si vous alignez à gauche votre texte, il se déplacera vers la gauche et si vous alignez à droite votre texte, il gravitera vers la droite..
Au lieu de cela, ce que vous voulez savoir, c'est comment ces alignements sont appropriés pour votre texte et comment ils se situent dans votre conception. Par exemple, de petites quantités de texte peuvent fonctionner correctement dans un alignement centré, bien que cela soit plus déroutant et difficile à lire pour de plus gros morceaux de texte. De même, avec les en-têtes, il peut être judicieux de les aligner de manière centralisée dans votre conception, bien que cela dépende de la taille du texte et de son emplacement. Par exemple, un en-tête aligné au centre peut ne pas fonctionner correctement s'il contient une grande quantité de texte aligné à gauche immédiatement au-dessous..
Vous devez également penser aux cultures pouvant être exposées à votre conception et à votre site Web. Dans certaines cultures, on lit de droite à gauche, alors que dans les cultures occidentales, on lit de gauche à droite et de haut en bas..
.content direction: rtl; text-align: right;
En raison de la culture occidentale de la lecture de gauche à droite, il sera probablement difficile d’aligner une grande quantité de texte à droite. Utilisez plutôt les alignements qui peuvent être plus difficiles à lire en très petites quantités, dans une caractéristique de conception telle que dans un pied de page pour une adresse ou des informations de contact, ou dans un en-tête avec une liste de liens de navigation..
L'alignement des images peut s'avérer difficile, car l'alignement que vous devez utiliser pour chaque image dépend de la taille de l'image. Les images plus petites sont naturellement plus faciles à insérer dans votre contenu sans perturber le contenu, tandis que les images plus grandes ont tendance à perturber davantage le flux de lecture et sont donc plus difficiles à insérer dans votre contenu..
Vous avez deux options. soit vous placez vos images en dehors du flux de contenu (par exemple, entre des paragraphes ou au début ou à la fin de votre contenu), soit vous pouvez trouver un moyen d'insérer vos images dans votre grille.
La première option est assez facile à mettre en œuvre. Sans interrompre le flux de texte, vous pouvez placer les images en pleine largeur ou selon une largeur et un centre personnalisés dans la zone dans laquelle le texte se trouve normalement. C'est assez simple et cela a tout de même une belle apparence, tout en fonctionnant correctement lorsque vous réduisez un site Web. c'est réactif.
La deuxième option peut devenir un peu plus compliquée, selon la manière dont vous décidez de placer les images dans votre contenu. Vous avez plusieurs options. Vous pouvez d’abord aligner parfaitement les images (à gauche ou à droite) sur votre texte ou les faire apparaître légèrement au-delà du bord du contenu..
De cette façon, vos images pourraient être placées sur une largeur de colonne complète dans le contenu, le contenu circulant autour de l'image. Cela ne perturbe pas le flux de lecture autant que si l'image était placée entièrement à l'intérieur de la zone de contenu, mais cela ajoute également de l'intérêt à votre conception. En effet, vous créez une autre zone d'alignement pour vos éléments qui gardera votre conception visuellement plus fraîche et plus claire. plus engageant.
L’alignement des images d’arrière-plan est l’une de ces difficultés - et encore une fois, tout dépend de votre conception et de votre sujet, ainsi que de la taille de l’arrière-plan..
Comme pour les alignements de texte, l'alignement de vos images d'arrière-plan peut très bien correspondre à vos règles CSS. fixe, absolu, en haut ou en bas, à gauche ou à droite? En réalité, cela dépend de votre conception et de la manière dont l’image d’arrière-plan s’y intègre. Si votre conception comporte un motif, réfléchissez à la manière dont ce dernier s'aligne sur vos éléments - vous voulez vous assurer qu'il s'aligne bien avec vos éléments, sinon le design entier pourrait s'envoler complètement..
Pensez également à son apparence si vous avez une grande image d’arrière-plan focale et à son adéquation avec votre conception. S'ils sont volumineux et très concentrés, pensez peut-être à la manière dont vos autres éléments et modules pourraient s'intégrer à cette conception. Par exemple, le texte de votre corps principal peut-il être aligné sur les bords du dessin? Tout est question de savoir comment vos images fonctionnent avec les autres parties de votre conception et comment vous pouvez les utiliser pour améliorer votre conception et améliorer leur collaboration..
Quand je décris un groupe d'éléments, je le considère comme très différent de ce que je décrirais comme un module.
Quand on pense en termes de modules-lors de la conception et de la conception du site Web, je les considère comme un groupe d'éléments liés les uns aux autres et très proches les uns des autres. Des exemples de modules pour moi sont un groupe de liens, une image de héros et un texte ou un en-tête superposé; tout ce qui peut être groupé est un modèle répétable ou autonome.
Cependant, un groupe d'éléments est un groupe d'éléments dans votre conception, qui ne nécessairement doivent être proches les uns des autres. Par exemple, un groupe d'éléments peut être à la fois vos éléments d'en-tête (logo et liens de navigation, par exemple) et vos éléments de pied de page (peut-être un autre ensemble de liens, associé à un avis de droit d'auteur). Ce sont des groupes d'éléments et vous pouvez ensuite les aligner dans votre conception. Bien que l'en-tête et le pied de page puissent ne pas être visibles sur le même espace d'écran, ces utilisations subtiles de l'alignement créeront une conception plus solide, plus attrayante et plus cohérente..
D'autres exemples de groupes d'éléments sont simplement le texte et les images de votre copie principale sur une page, ou peuvent même être aussi simples qu'un ensemble de liens ou d'éléments de navigation. Par exemple, dans une navigation plus complexe, vous pouvez avoir les liens de texte principaux, mais également un «sous-titre» plus petit au lien. De plus, vous pourriez avoir une icône au-dessus ou en dessous du texte du lien. Bien qu'il s'agisse de bits individuels et que ces trois bits constituent un lien, tous ces liens individuels peuvent constituer un module de navigation complexe, mais peuvent également être regroupés en un groupe d'éléments que vous pouvez ensuite aligner avec d'autres groupes de la conception..
Maintenant que vous savez tout sur l'alignement dans vos conceptions (et avec vos grilles), je veux que vous commenciez à regarder vos conceptions et à voir comment tous les éléments s'alignent. Essayez de regrouper différents éléments, groupes d’éléments et alignez le texte et les images dans vos conceptions..
Voyez ce que vous pouvez faire pour créer une meilleure conception en alignant correctement chaque élément de votre conception. En utilisant le système de grille de votre dernière affectation, travaillez à aligner tous les éléments de votre conception en vous servant des astuces données dans l'article d'aujourd'hui..
Accentsconagua