() translation by (you can also view the original English article)
La composition porte sur toutes les idées et les éléments de design dans l'ensemble ; qui composent votre design. Nous allons combiner toutes les leçons précédentes que nous avons couvertes, et à cause, cela fait de la composition l’un des aspects vraiment difficiles de designer quelque chose.
Créer une bonne composition va stimuler l'expérience des utilisateurs lors de la navigation autour de votre site et contribuera à mouler un meilleur design dans l’ensemble. Nous visons l'alignement, la cohérence et une unité forte. La composition permet également d’ajouter un intérêt visuel à nos mise en pages afin que nous puissions aider nos utilisateurs à comprendre plus au sujet de leur parcours sur un site web, où ils doivent se diriger ensuite.
La composition est sans doute la partie la plus importante de votre processus de design - point.
Comme nous l'avons appris au début de cette série, designer c'est « décider de l’apparence et de la fonction (d'un bâtiment, vêtement ou autre objet), généralement en faisant un dessin détaillé de celui-ci »- et composition signifie « écrire ou créer ». Par conséquent, lorsque nous mettons ces deux ensemble, dans notre phase de composition nous composons (créons) l'apparence et la fonction de notre design - essentiellement, nous mettons maintenant tout ensemble.
Compositions et mises en pages courantes
Dans le design d’impression traditionnel, il y a beaucoup de compositions et mise en pages imprimées qui se sont avérées bien fonctionner au fil du temps. Bon nombre d'entre elles se retrouvent maintenant sur le web - et avec raison. Bien qu’il peut être difficile de traduire ces mises en page en termes absolus pour le desigb web, cela peut nous prêter au moins une petite idée et du focus sur les mises en pages que nous pourrions vouloir nous évertuer à créer.
Il y a beaucoup de types de composition ou de configurations populaires disponibles - mais je vais parler ici que quelques-unes. Il y a tant de ressources en ligne pour creuser en profondeur, et bien que ces schémas traditionnels sont importants je souhaiterais également entrer dans les détails sur d’autres aspects de la composition.
Image unique
La première place est pour la mise en pages image unique.
C’est très simple, en réalité - c’est où il y a un aspect important d’un design qui sert à la focalisation sur un visuel unique. Par exemple, vous pourriez créer un design avec une grande photo dans le fond, avec beaucoup d’espace et de la typographie simple superposée.
Mise en pages en Z
La mise en pages en Z est assez explicite et concerne fortement la mise en pages que vous choisissez pour vos éléments de design.
Autrement dit, la mise en pages en Z suit le modèle naturel que nos yeux pourraient prendre normalement lorsque nous scannons un site web. Si vous ne pouvez pas l’imaginer déjà, cela apparaît parfois dans la recherche dans le schéma de la lettre « Z » - coulant de la partie supérieure gauche, le long vers la droite, vers le bas en diagonale et ensuite vers la droite à nouveau.
Cela peut être très utile quand vous pensez à l’endroit où placer vos éléments afin qu’ils soient pertinents pour l’utilisateur. Ça peut vous aider à donner du poids aux éléments importants.
Règle des tiers
Un de design utilisé en photographie et cinématographie (et bien plus encore), la règle des tiers est une bonne mise en pages de composition pour le design web.
La règle des tiers est un guide qui stipule qu’une image doit être fractionnée en neuf parties égales (trois à travers, trois vers le bas) avec des éléments de cette image ou du design s'alignant sur les bords de chacune de ces parties. Ceci est particulièrement utile dans le design web, tel qu’il peut nous aider à créer de meilleures proportions et mises en pages dans nos designs.
La règle des tiers est un excellent outil de composition et de mise en pages. Bien que ce soit quelque chose que vous ne devez toujours pas strictement suivre, elle peut être une grande aide dans la design avec plus d’équilibre. Elle peut également être utilisée aux côtés d’autres mises en pages visuelles ou compositions, tels que l'image unique, ou même lors de la création de vos systèmes de grille.
Nombre (section) d'or
Fortement impliqué dans les mathématiques, le nombre d’or (ou cection d’or si vous préférez l’appeler ainsi) est l’une des plus reconnaissables (de nom, du moins) composition de mises en pages ou outils dans toute forme de design.
Souvent pensé avoir été créée par les Grecs de l’Antiquité (des gars intelligents, ils étaient) le nombre d’or décrit la relation entre deux proportions. Le nombre d’or est 1.618(03398875...) et il semble que beaucoup d’éléments dans la nature se retrouvent souvent correspondant à ce ratio. C'est donc toujours quelque chose qui est plus rassurant et agréable à nos yeux humains.
Parce que c’est un tel modèle familier pour nous, il est logique d’essayer d’utiliser le nombre d’or dans nos dedigns ; pour créer un équilibre harmonieux qui donne juste l'impression d'être bon et sensé.
Une manière simple dont nous pouvons implémenter cela dans nos designs est de prendre le nombre de la section d’or (1.618) et d'utiliser un tout petit peu de maths. Dans notre design, nous pourrions avoir une zone où nous, par exemple, voudrions mettre un contenu et une petit encart ou barre latérale. Juste scinder cela dans nos designs sans même y penser peut être facile - surtout si vous avez un système de grille simple en place - mais quand on pense à ce sujet en termes de nombre d’or, nous pourrions obtenir un résultat plus beau en fin de compte.
Nous avons donc cette zone que nous voulons scinder en deux, à l’aide de notre nombre d’or. Pour ce faire, mesurez la largeur de la surface disponible (allons-y avec 950px pour les besoins de cet article) et divisez-la par 1.618.
Si notre largeur disponible est 950px, cela signifie que notre premier calcul (pour notre contenu principal) doit être : 950 / 1,618 = 587,144622991 (que nous allons arrondir à 587px).
Ensuite, nous allons simplement soustraire ce chiffre de notre largeur d'origine disponible pour obtenir notre deuxième largeur, pour la barre latérale ou l'encart : 950 - 587 = 363px.
Comme notre contenu principal est plus pertinent et que nous voulons qu’il soit le point focal dans cette partie du design, nous pouvons utiliser le plus grand des deux derniers nombres pour la largeur de ce contenu. Nous pouvons alors utiliser le plus petit nombre pour notre encart ou barre latérale. Et là, nous l'avons : notre design ratio parfaitement doré !
Remarque : Extrapoler cette relation fait partie de la création d’une échelle modulaire pour votre design.
Espace
La composition porte également sur l’espace. Cela ne signifie pas que vous laissiez de vastes zones vides dans vos créations, mais il s’agit au contraire d’être habile avec l’espace que vous avez à votre disposition. Exploiter l'espace vierge porte autant sur fournir du focus à votre contenu, en laissant des zones vides.
Cela dit, utilisez la marge intérieure et les espaces à votre avantage - personne ne trouve qu’il est facile de naviguer dans un site web encombré, avec une hiérarchie minimale et où les éléments sont à l’étroit et n’ont aucune marge de manoeuvre. Au lieu de cela, introduire l’espace dans des endroits que vous pouvez afin de permettre une meilleure expérience globale pour vos designers.
À la prochaine...
Nous étant à nous-mêmes présenté le concept de composition, dans la section suivante, nous allons en outre examiner l'espace dans nos designs. On se voit là-bas !
