Share
La composition consiste à regrouper toutes vos idées et tous vos éléments de conception; composition ton design. Nous allons combiner toutes les leçons précédentes que nous avons couvertes et, de ce fait, cela fait de la composition un de ces aspects très difficiles à concevoir..
Créer une bonne composition renforcera l'expérience des utilisateurs lors de la navigation sur votre site et contribuera à façonner un meilleur design. Nous visons l'alignement, la cohérence et l'unité forte. La composition nous aide également à ajouter une pertinence visuelle à nos mises en page afin que nous puissions aider nos utilisateurs à mieux comprendre leur parcours sur un site Web, où ils devraient se diriger ensuite..
La composition est sans doute la partie la plus importante de votre processus de conception - point final.
Comme nous l’avons appris au début de cette série, concevoir consiste à «décider de l’aspect et de la fonction (d’un bâtiment, d’un vêtement ou d’un autre objet), généralement en réalisant un dessin détaillé" - et la composition consiste à "écrire ou créer ” Par conséquent, lorsque nous associons ces deux éléments, nous composons (créons) l’aspect et la fonction de notre conception au stade de la composition - essentiellement, nous mettons tout ensemble en place..
Dans la conception d’imprimés traditionnels, de nombreuses compositions d’imprimés et mises en page se sont avérées efficaces au fil du temps. Beaucoup d’entre eux se retrouvent maintenant sur le Web - et avec raison. Bien qu'il puisse être difficile de traduire ces mises en page en termes absolus pour la conception sur le Web, cela peut au moins nous donner une petite idée et nous concentrer sur les dispositions que nous pourrions vouloir essayer pour créer notre.
Il existe de nombreux types de compositions ou de mises en page populaires, mais je vais en aborder quelques-unes ici. Il existe de nombreuses ressources en ligne pour les examiner plus en profondeur. Bien que ces mises en page traditionnelles soient importantes, je voudrais aussi entrer plus en détail. sur d'autres aspects de la composition.
Le premier est la disposition visuelle unique.
Un excellent exemple de la mise en page Single Visual, telle que vue sur le site Web Creative People. C’est très simple: c’est là qu’un aspect majeur d’un design sert de foyer visuel unique. Par exemple, vous pouvez créer un dessin avec une grande photo à l’arrière-plan, avec beaucoup d’espace et une typographie simple superposée..
La mise en page Z est assez explicite et se rapporte fortement à la mise en page que vous choisissez pour vos éléments de conception.
Le Z-Layout vu en action sur BBC News. En termes simples, la mise en page Z suit le motif naturel que nos yeux pourraient normalement observer lorsque nous parcourons un site Web. Si vous ne pouvez pas déjà l’imaginer, c’est parfois dans les recherches qu’il est démontré que la lettre «Z» s’écoule en haut à gauche, le long à droite, en diagonale, puis à nouveau..
Cela peut être très utile lorsque vous pensez où placer vos éléments afin qu'ils soient pertinents pour l'utilisateur. Cela peut vous aider à donner du poids à des éléments importants.
Principe de conception utilisé dans la photographie et la réalisation de films (et bien plus encore), la règle des tiers est un bon agencement de composition pour la conception sur le Web..
La règle des tiers est une ligne directrice qui propose de scinder une image en neuf parties égales (trois en travers, trois en bas) avec des éléments de cette image ou de ce dessin alignés sur les bords de chacune de ces parties. Ceci est particulièrement utile dans la conception Web, car il peut nous aider à créer de meilleures proportions et mises en page dans nos conceptions..
La règle des tiers est un excellent outil de composition et de mise en page. Bien que cela ne soit pas toujours strictement suivi, cela peut être une aide précieuse pour concevoir avec plus d’équilibre. Il peut également être utilisé avec d'autres dispositions visuelles ou de composition, telles que le visuel unique, ou même lors de la création de vos systèmes de grille..
Très impliqué dans les mathématiques, le nombre d'or (ou section d'or si vous préférez l'appeler ainsi) est l'un des schémas de composition ou des outils de composition les plus reconnaissables (quelle que soit leur forme)..
Souvent considéré comme ayant été créé par les Grecs anciens (peuple intelligent, ils l'étaient), le rapport doré 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 sont souvent trouvés correspondant à ce rapport. C'est donc toujours quelque chose qui est plus rassurant et agréable à nos yeux humains.
Comme il s'agit d'un modèle si familier pour nous, il est logique d'essayer d'utiliser le nombre d'or dans nos conceptions; pour créer un équilibre harmonieux qui semble juste se sentir bien et avoir un sens.
Un moyen simple d'implémenter cela dans nos conceptions est de prendre le nombre d'or (1.618) et d'utiliser un tout petit peu de maths. Dans notre conception, nous pourrions par exemple avoir un domaine dans lequel nous souhaitons mettre du contenu et un petit aparté ou sidebar. Diviser cela dans nos conceptions sans y penser peut être facile - en particulier si vous avez un système de grille simple en place - mais quand nous y pensons en termes de nombre d'or, nous pourrions obtenir un meilleur résultat à la fin..
Nous souhaitons donc scinder cette zone en deux, en utilisant notre nombre d’or. Pour ce faire, mesurez la largeur de la surface disponible (avec 950 pixels pour cet article) et divisez-la par 1,618..
Si notre largeur disponible est de 950 pixels, cela signifie que notre premier calcul (pour notre contenu principal) devrait être: 950 / 1,618 = 587.144622991 (que nous arrondirons à 587 pixels).
Ensuite, nous allons simplement soustraire ce chiffre de notre largeur disponible d'origine pour obtenir notre deuxième largeur, pour la barre latérale ou de côté: 950 - 587 = 363 pixels.
Comme notre contenu principal est plus pertinent et que nous souhaitons que cela soit au centre de cette partie de la conception, nous pouvons utiliser le plus grand des deux chiffres finaux pour la largeur de ce contenu. Nous pouvons ensuite utiliser le chiffre le plus petit pour notre côté ou la barre latérale. Et là nous l'avons - notre conception parfaitement dorée!
Remarque: L'extrapolation de cette relation fait partie de la création d'une échelle modulaire pour votre conception..
La composition concerne aussi l'espace. Cela ne signifie pas que vous laissez de vastes zones vides dans vos conceptions, mais qu'il faut plutôt être intelligent avec l'espace dont vous disposez. Exploiter les espaces blancs consiste autant à cibler votre contenu qu’à laisser des espaces vides.
Cela dit, utilisez le remplissage et les espaces à votre avantage - personne ne trouvera facile de naviguer sur un site Web encombré, peu hiérarchisé et où les éléments sont étroits et ne disposent d'aucune marge de manœuvre. Au lieu de cela, introduisez de l’espace dans des endroits possibles pour permettre une meilleure expérience globale à vos concepteurs..
Après nous être familiarisés avec le concept de composition, nous examinerons dans la section suivante l’espace dans nos conceptions. On se voit là-bas!
Accentsconagua