Aujourd'hui, nous allons examiner l'un des principes les plus fondamentaux de la conception: l'alignement. Ce sujet, d'une simplicité trompeuse, est en fait assez complexe et fait partie des lacunes les plus remarquables chez les concepteurs d'aujourd'hui.
Une bonne compréhension du moment et de l’utilisation de certains alignements fera de vous un meilleur concepteur et restera un élément de base pour tout ce que vous créez tout au long de votre carrière.
Introduction à l'alignement
Pour beaucoup, une discussion sur l'alignement peut sembler être un exercice arbitraire. Une telle théorie de conception de base ne concerne sûrement que des personnes qui n’ont jamais rien conçu de leur vie, pas la communauté professionnelle qui fréquente de tels sites. Droite?
Je voudrais moi-même approfondir l'argument selon lequel une telle discussion s'adresse aux débutants en affirmant qu'une bonne connaissance de l'alignement visuel est une base imbattable pour tous les types de conception. C'est le type de connaissances que, une fois saisi, vous utiliserez pour chaque mise en page créée en tant que concepteur.
Cependant, malgré l’idée selon laquelle ces concepts sont au cœur même de ce que nous faisons en tant que concepteurs, l’alignement semble être la principale source de la plupart des problèmes de conception que je vois actuellement sur le Web.
Les concepteurs auto-formés ont souvent une compréhension intuitive de la façon d'utiliser les alignements, mais cela peut échouer sans le savoir explicitement.
Aligner les choses
L'idée essentielle de l'alignement est extrêmement simple: aligner les choses. En dehors du design organique, qui est un sujet entièrement différent, chaque élément que vous placez sur une page doit être accompagné d'un processus de réflexion logique quant à son positionnement.
Encore une fois, ce sont des choses de base, non? Tout le monde le fait déjà? droite? Faux. Considérez le site suivant récemment soumis à notre galerie CSS. Je ne l’utilise pas comme un exemple mesquin, mais comme un instrument d’enseignement. Le designer est un mec génial qui commence tout juste à se lancer. Il améliore ses compétences quotidiennement et est désireux d'apprendre.
Cet exemple est extrêmement typique et correspond exactement au genre de choses que nous voyons tous les jours dans les soumissions de nos galeries. La valeur esthétique ici n'est pas mauvaise. Les couleurs vives et les textures intéressantes attirent assez bien votre attention. Cependant, l'alignement ici a vraiment manqué la cible.
Les problèmes ici peuvent être difficiles à détecter pour beaucoup de gens. Pour cette raison, je recommande toujours de simplifier un dessin pour examiner les formes de base. Vous verrez que je le fais dans plusieurs articles que j'écris sur le design et que vous devriez absolument l'essayer sur quelques-uns de vos propres designs.
Maintenant que nous voyons les objets graphiques dans un état simplifié, nous pouvons mieux analyser le volume d’espace qu’ils occupent et résoudre les éventuels problèmes d’alignement.
Notez que tout à coup les éléments sur la page semblent dispersés. La zone de contenu principale en bas ne s'aligne pas avec la bannière suspendue en haut à gauche ni avec les éléments dispersés en haut à droite. De plus, le logo de Facebook semble petit et isolé, et le titre est décalé du bord de la navigation, ce qui est décalé du bord du contenu.
Bien que cette conception se sente assez décente au moment où nous la sentions, nous voyons maintenant qu’elle pourrait faire l’objet de nombreuses restructurations. À partir de là, vous devez prendre en compte deux éléments clés: l’alignement et l’espace négatif.
Ces concepts sont extrêmement étroitement liés les uns aux autres. Travailler avec l’espace négatif a beaucoup à voir avec la focalisation sur les écarts et l’application d’une symétrie de base. Pour en savoir plus sur la marche à suivre concernant l’espace négatif, lisez mon Guide de l’espace négatif à Six révisions.
Dans cet article, nous allons continuer en nous concentrant davantage sur l'utilisation des alignements de base que vous connaissez bien dans les mises en page complexes.
Alignement central
Les mises en page centrées sont la méthode de choix pour à peu près toutes les personnes sur la planète? sauf les concepteurs. Pour une raison quelconque, centrer les éléments sur la page semble être ce que vous êtes censé faire. Le travail principal d'un designer est sûrement de simplement centrer les éléments!
J'ai rencontré ce problème il y a quelques années lorsque j'ai transféré un concept que j'avais créé à un développeur. Quand il m'a montré la version finale, tout avait été déplacé d'alignement de gauche à centré! Il expliqua simplement qu'il avait toujours préféré tout aligner au centre.
En réalité, centrer chaque élément est le choix d'alignement le plus faible que vous puissiez faire.
Il n'y a pas de limites dures à suivre, vos yeux doivent donc faire beaucoup plus de travail pour assimiler la mise en page globale et absorber le contenu spécifique.
Quand utiliser
Cela ne veut pas dire que les alignements centraux doivent toujours être évités. Je les ai moi-même utilisés sur des démos pour ce site même. La clé est de savoir quand les utiliser.
Je trouve que le meilleur scénario possible pour un alignement au centre est lorsqu'il y a très peu de choses sur une page. Plus la mise en page est compliquée, moins les alignements centraux fonctionnent. Si une page donnée ne comporte pas beaucoup d'activités, les alignements centraux peuvent être très puissants.
Alignement à gauche
Les alignements gauches, bien qu'ennuyeusement ennuyeux, sont solides et devraient être votre alignement par défaut pour une grande partie du travail que vous effectuez.
Nous avons l'habitude de voir le contenu organisé de manière alignée à gauche. Ouvrez un livre ou un journal et vous trouverez de nombreux alignements à gauche. Parcourez les annonces dans votre courrier indésirable, encore une fois, de nombreux alignements à gauche. Vous les verrez sur Facebook, les résultats de recherche Google, les flux Twitter et tous les autres sites Web majeurs.
Les alignements de gauche dominent le monde, ou du moins les sociétés qui lisent de gauche à droite. Vous ne devriez pas complètement dépendre d'un alignement à gauche pour tout, mais sachez que c'est la voie la plus sûre.
Quand utiliser
Utilisez-le dans toutes sortes de situations, mais surtout lorsqu'il y a beaucoup de texte. Jetez un coup d’œil à la page que vous lisez en ce moment.Si cela était aligné au centre, ce serait un cauchemar.
Notez que, en particulier sur le Web, aligner à gauche quelque chose ne signifie pas que vous ne pouvez pas le centrer. Par exemple, une div HTML contient souvent un tas de paragraphes et d'images alignés à gauche, mais est ensuite centrée sur la page à l'aide de CSS.
Alignement à droite
Les alignements à droite sont probablement les plus rares. Comme nous lisons de gauche à droite, il est étrange que quelque chose s’accroche au bord droit.
Cependant, il s'agit d'un alignement parfaitement solide qui peut être utilisé à fond dans vos conceptions, en particulier dans les impressions (il a tendance à être encore plus inattendu en ligne).
Quand utiliser
Souvent, mais pas toujours, un bon alignement donnera un sentiment d'unicité. Si vous concevez quelque chose qui doit se démarquer et se sentir différent, un bon alignement est un excellent point de départ.
Justifier les alignements sur le Web
L'alignement que nous avons laissé de côté est évidemment justifié. Cela entre en jeu lorsque vous associez un site entier à un élément conceptuel.
La chose intéressante à propos de la conception Web est qu’elle implique souvent un mélange d’alignements. Vous avez probablement entendu des concepteurs suggérer de ne jamais mélanger les alignements, mais ce conseil ne fonctionne tout simplement pas dans le monde réel.
Au lieu de cela, vous devez prendre des décisions à la fois pour les éléments d'une page et pour l'ensemble des éléments de la page. Remarquez comment j'ai commencé cette discussion en consultant un exemple d'affichage de l'alignement d'un site, puis en discutant d'alignements d'éléments individuels.
Une fois que vous avez défini un alignement pour le texte et les images de votre page, vous devez souvent regrouper tous les éléments de la page dans un alignement justifié. Bien que vous puissiez avoir un bord irrégulier, tout justifier peut ajouter cette touche de rangement qui manquait dans l'exemple d'origine.
Notez que, dans le site ci-dessus, il existe un fort alignement à gauche, mais que tout ce qui se trouve à droite a également été aligné pour créer un aspect cohérent et cohérent. Le petit bouton de connexion s'aligne sur les images du navigateur, qui s'alignent sur le côté droit de l'icône du calendrier.
Ceci est propre, design professionnel. Cela peut ne pas convenir à tous les projets, mais je peux souvent voir des concepteurs essayer de l’atteindre et y échouer et je voulais aborder certaines des causes probables.
C'est l'une des raisons pour lesquelles les systèmes de grille sont si populaires. Tout jeter sur une grille garantit que vos alignements sont robustes et faciles à suivre.
Conclusion
Pour résumer, utilisez si possible des alignements puissants qui permettent à votre œil de suivre facilement le flux d'informations. Les alignements centraux sont acceptables, mais deviennent plus difficiles à mettre en œuvre correctement à mesure que le contenu d'une page augmente.
Rappelez-vous que l'alignement fait référence à des éléments spécifiques sur une page ainsi qu'à la disposition des objets dans leur ensemble. Passez du temps sur chaque conception en vous assurant que tous vos éléments s'alignent correctement avec tout ce qui est sur la page. Ceci s'applique verticalement et horizontalement le long de tous les bords du dessin.