Share
Les maths sont partout, même là où on ne s'y attend pas. Vous pouvez trouver des ratios et des constantes mathématiques dans l'architecture, mais aussi dans les instruments que nous utilisons pour faire de la musique. Vous pouvez trouver des mathématiques dans certains jeux auxquels nous jouons, et cela ne devrait donc pas vous surprendre que les mathématiques jouent également un rôle important dans la conception de sites Web. Mais quel est ce rôle? Et comment pouvons-nous utiliser ces ratios, constantes et théories pour rendre nos conceptions Web plus belles?
Walt Disney une fois fait un film sur Donald Duck à Mathmagicland. Dans cette vidéo - disponible sur YouTube -, ils présentent aux enfants les mathématiques et à quoi elles servent. Cela montre qu’un rapport mathématique est utilisé pour définir les notes de nos instruments et qu’un rectangle mathématique peut être trouvé dans l’architecture ancienne et moderne. En outre, nous pouvons trouver ce même rectangle exacte dans certains arts de la Renaissance, par exemple, le célèbre Léonard de Vinci.
La leçon générale est simple: vous pouvez utiliser certains principes mathématiques de base pour définir l’ordre et la beauté dans vos propres créations..
Dans la Grèce antique, un groupe d’élites de mathématiciens s’appelait le Pythagoriciens. Les pythagoriciens avaient le pentagramme comme emblème. Ils ont choisi cette forme en raison de sa perfection mathématique: la forme linéaire du pentagramme contient déjà trois fois le nombre d'or! En outre, il y a des tonnes de rectangles d'or cachés à l'intérieur de la forme également, ce sont les mêmes rectangles dorés que ceux présents dans Mona Lisa.
Peu de temps après, dans le 12th et 13th siècle, a vécu un mathématicien italien talentueux. Son nom était Leonardo Pisano Bigollo, bien que vous le connaissiez peut-être mieux Fibonacci. Pour son livre Liber Aci, il a observé l'élevage naturel de lapins. Dans son monde idéal, où aucun lapin ne mourrait jamais et où chaque lapin se reproduirait le plus rapidement possible, il a découvert que ce cycle contenait une séquence spéciale de nombres. Cette séquence est connue plus tard sous le nom de Nombres de Fibonacci.
La particularité de cette séquence est que si vous divisez un nombre choisi par le numéro précédent dans la séquence, vous obtiendrez (environ) le même nombre, à chaque fois. Ce nombre est environ 1.618, mieux connu comme Phi. Plus vous avancez dans la séquence, plus le résultat de la division est proche de Phi. Fibonacci a également découvert que cette séquence ne se retrouvait pas seulement dans l'élevage de lapins, mais aussi dans d'autres choses de la nature, telles que la disposition des graines dans un tournesol..
Comme vous le savez peut-être déjà, Phi est également une constante très importante dans la conception; En effet, un ratio de 1 à 1,618 est mieux connu sous le nom de Nombre d'or - souvent appelé le Section dorée, Juste milieu ou la Rapport divin. Si vous créez un rectangle en fonction de ce rapport, vous obtenez une forme connue sous le nom de Rectangle d'or.
Le nombre d'or et le rectangle d'or sont utilisés dans de nombreuses formes d'art et de design. À la Renaissance, de nombreux artistes ont proportionné leurs œuvres en fonction de ce ratio et de ce rectangle. Dans la Grèce antique, les architectes utilisaient ce rectangle dans la conception des bâtiments; le Parthénon en est un bon exemple. Même dans l'architecture moderne, le rectangle d'or a une forte présence.
Mais qu'est-ce qui rend ce rapport si spécial? Parce que ce nombre, Phi, trouve ses origines dans la nature, nous, humains, nous trouvons automatiquement à l'aise avec ce rapport. Parce que nous connaissons tellement ce rapport, il déclenche naturellement un sentiment d’équilibre et d’harmonie. Pour cette raison, l’utilisation de ce rapport peut vous garantir une composition équilibrée de vos éléments..
Avant même d’envisager d’appliquer le rapport à nos conceptions, nous devons d’abord examiner quelques exemples qui utilisent déjà le rapport..
Un bon exemple est ce site Web, car sa conception contient de nombreux cas du rapport. Dans l'image ci-dessous, vous pouvez voir une capture d'écran de ce site. Comme vous pouvez le constater, j’ai utilisé deux couleurs pour marquer les différentes colonnes. La largeur de la colonne principale contenant les articles de blog est plus ou moins 1,618 fois la taille de l'encadré des annonces. Un calcul rapide sur le fond le prouve.
Mais non seulement ce site utilise le nombre d’or sur sa largeur totale, il s’applique également à certaines des plus petites parties du site..
Jetons un coup d'œil à la colonne principale, puis au contenu à l'intérieur. Comme vous pouvez le voir ci-dessous, l'élément conteneur est environ 1,618 fois plus volumineux que le contenu à lire dans cet élément..
Un autre bon exemple est le célèbre blog Smashing Magazine. Sa colonne principale a une largeur totale d'un peu plus de 700 pixels. Lorsque vous divisez ce nombre par 1,618, le résultat est environ 435: La largeur exacte de la barre latérale.
La toile d'un tableau et la largeur d'un bâtiment ont toutes une largeur fixe, les écrans qui affichent notre travail varient en taille. Par conséquent - et en particulier dans les conceptions fluides - une variable supplémentaire doit être prise en compte lors du calcul du nombre d'or.
Cependant, il existe un moyen facile de surmonter ce problème. Lorsque vous souhaitez calculer la largeur d'un élément en fonction du ratio, il vous suffit de prendre la largeur de son élément parent, donc de l'élément contenant. Dans notre premier et dernier exemple, il s’agissait de la largeur totale d’un site Web. Dans le deuxième exemple, il s’agissait de la largeur d’une petite partie: leur colonne principale.
Quoi qu'il en soit, lorsque vous avez déterminé la largeur de l'élément contenant, vous devez maintenant diviser cette valeur par Phi. Le résultat vous donnera la largeur de l'élément principal. Maintenant, tout ce qui reste à faire est de soustraire le résultat de l'élément principal de votre largeur d'origine, cela vous donnera la largeur de la colonne secondaire.
Si vous avez du mal à vous souvenir de Phi, ou si vous êtes simplement paresseux pour entrer des chiffres sur une calculatrice, je suggère d'utiliser Phiculator. Cette petite application nécessite de renseigner une valeur (la largeur de l'élément conteneur) et calcule automatiquement la largeur correspondante. Vous pouvez même lui demander de calculer avec des entiers, de sorte que vous n'avez pas à vous soucier des nombres décimaux non plus.
Une autre division mathématique célèbre est la règle des tiers. Cette règle peut vous aider à créer une composition équilibrée en divisant votre toile en neuf parties égales. La règle est un peu similaire au ratio d’or, car la division par 0,62 est très similaire à 0,67 - ce qui équivaut à deux tiers..
Une forme d'art où la règle des tiers est très souvent utilisée est celle de la photographie car c'est un moyen facile et rapide guider pour vous faire une bonne composition. C'est pourquoi vous trouverez probablement une fonction sur votre appareil photo numérique qui divise son écran LCD en neuf parties, en utilisant la règle des tiers. Même certains reflex ont cette fonction, car ils plantent quelques points lumineux dans le viseur lors de la mise au point..
En utilisant la règle des tiers, vous diviserez votre toile horizontalement et verticalement par trois. Cette division vous donne neuf rectangles égaux, quatre lignes et quatre points d'intersection. Vous pouvez créer une composition intéressante et équilibrée en utilisant ces lignes et points d'intersection.
La clé d'une bonne composition réside évidemment dans le positionnement correct de vos éléments. Lorsque vous utilisez la règle des tiers, vous pouvez positionner deux choses avec.
Les premiers sont les lignes utilisées pour diviser la toile. En photographie, les objets aux formes longues et droites sont souvent alignés sur ces lignes. Dans la conception, les éléments ayant la même forme, comme une barre latérale, peuvent également être alignés sur ces lignes..
La deuxième chose à aligner sont les points d'intersection de vos lignes de division. Vous aurez besoin de mettre un ou deux objets sur ces points, car trop tuera toujours votre composition.
Un bon exemple que j'ai trouvé sur le site de photographie Flickr. Comme vous pouvez le voir ci-dessous, le photographe a aligné la rangée d'immeubles sur la ligne du haut. Au point d'intersection situé en haut à droite, vous trouverez une maison qui se démarque le plus par sa couleur. Parce que c'est déjà un point focal, l'aligner sur le point d'intersection ajoute à une bonne composition et à une sensation équilibrée..
photo flickr trouvée ici Nous avons vu la règle des tiers appliquée à la photographie, mais pourquoi ne pas l'appliquer à la conception de sites Web, pouvons-nous en trouver des exemples??
Ce site Web est un bon exemple de la règle appliquée à la conception Web. J'ai préparé une image que vous pouvez voir ci-dessous. Cela montre que, à droite, la barre latérale est très étroitement alignée sur la ligne verticale à droite. A gauche, vous pouvez voir que les articles sont positionnés sur les points d'intersection.
Les deux alignements que vous voyez ci-dessus créent un sentiment d’harmonie dans la présentation de ce site Web..
Alors, comment exactement appliquer la règle des tiers à la conception de votre site? Encore une fois, la largeur variable de notre "toile" peut apporter des problèmes. Quand nous utilisons la même technique que nous avons fait avec le nombre d'or, cependant, tout ira bien.
Pour appliquer la division, vous devez prendre toute la largeur de votre élément conteneur et la diviser par trois. Vous devez ensuite tracer une ligne - ou un guide, celui qui vous convient le mieux - deux fois sur la valeur obtenue (multipliez-les par deux pour obtenir la position de la deuxième ligne)..
La deuxième partie de la division peut toutefois vous poser quelques problèmes. La hauteur de notre "toile" est également variable, donc diviser cette variable par trois nous causera des problèmes. Pour contourner ce problème, j'utilise la méthode suivante: calculer la «hauteur» de la division avec un rapport 16: 9 (écran large) ou simplement utiliser la hauteur de l'élément conteneur. Divisez la largeur de l'élément contenant par 16 et multipliez ce nombre par 9 pour obtenir une hauteur. Vous pouvez maintenant diviser à nouveau ce nombre par 3 et dessiner les lignes / guides.
Lorsque vous avez configuré les guides, vous pouvez maintenant positionner vos éléments en fonction de ces guides. Alignez vos éléments sur les lignes, et vous devez placer des éléments d’intérêt et de contraste sur les points d’intersection..
Vous ne pouvez pas penser que les grilles sont mathématiques, mais elles le sont. Vous divisez votre toile en différentes colonnes et gouttières, cette division par deux, trois - et j'ai vu jusqu'à seize ans - est vraiment mathématique.
Beaucoup de gens disent que les systèmes de grille limitent votre créativité, car vous limitez votre liberté avec un système de grille. Je ne pense pas que cela soit vrai, car le livre intitulé Vormator m'a appris que les limitations stimulent votre créativité. C’est parce que vous penserez à des solutions qui tiennent compte de ces limites, alors que ces idées n’auraient jamais été envisagées si vous n’aviez pas ces restrictions..
La raison pour laquelle «les systèmes de grille» fonctionnent est qu’ils peuvent vous guider pour dimensionner, positionner et aligner la conception de votre site Web. Ils peuvent vous aider à organiser et à supprimer le fouillis de contenu. Mais surtout, ils sont faciles à utiliser.
Une autre bonne raison d'utiliser les grilles est que les règles doivent être enfreintes, n'est-ce pas? Si vous cassez votre grille de temps en temps, c'est pas mal. Au contraire! "Briser" votre grille peut créer un intérêt particulier pour un élément spécifique de la page, car il contraste avec le reste. Cela peut vous aider à atteindre certains objectifs, comme un appel à l'action qui se démarque davantage à cause de cela..
Il n'y a pas vraiment de moyen de construire un bon système de grille, car ils tournent autour du contenu et aucun contenu n'est vraiment identique. Mais pour le plaisir, je vais démontrer un processus simple pour construire une grille à 6 colonnes dans un environnement large de 960 pixels..
Tout d'abord, nous diviserons par 6 la largeur totale de notre toile afin d'obtenir la largeur totale de chaque colonne. Le résultat de cette division est de 160 pixels, comme vous pouvez le voir ci-dessous dans l'image.
Deuxièmement, nous allons créer une image d'une colonne, nous le dupliquerons plus tard. De cette façon, il est plus facile de créer notre grille complète par la suite, car nous n’avons pas à répéter cette étape pour chaque colonne..
Nous déciderons de la taille de notre gouttière, je pense que 20 pixels suffiront. La gouttière doit être ajoutée des deux côtés de la colonne, nous devons donc la diviser par deux. Si nous ne le faisons pas, notre gouttière aura une largeur de 40 pixels. Comme vous pouvez le voir dans l'image ci-dessous, nous avons ajouté une gouttière de 10 pixels de chaque côté..
Maintenant, nous pouvons dupliquer cette image jusqu'à atteindre 960 pixels et nous avons créé nous-mêmes une grille (de base).
Ne t'inquiète pas même si vous êtes paresseux, vous ne devrez pas vivre sans grilles. Il y a beaucoup de systèmes de réseau agréables - et gratuits - à gagner sur Internet. Mon préféré, et je suis sûr que vous en avez entendu parler auparavant, est le célèbre système de grille 960.gs, qui possède un framework CSS et un fichier PSD avec tous les guides installés..
J'espère vous avoir montré que les mathématiques peuvent être belles lorsqu'elles sont appliquées au design, et que je vous ai donné suffisamment de techniques pour pouvoir les utiliser dans votre prochain design. Soyez averti cependant, beaucoup de choses sont nécessaires pour réussir un dessin. Par conséquent, ces astuces ne garantissent pas un bon dessin, mais elles peuvent certainement vous aider et vous guider dans le processus de création..
Merci d'avoir lu!
Accentsconagua