En tant que concepteurs de sites Web, nous devons prendre beaucoup en considération lors du démarrage d'un projet. L'un des plus grands segments travaillant avec des dispositions et des systèmes pour espacer les commandes. Généralement, les concepteurs travaillent avec une bibliothèque CSS à espacement de grille, mais il existe de nombreuses façons de mettre en œuvre des présentations créatives.
Aujourd'hui, nous allons passer en revue le nombre d'or et voir comment vous pouvez appliquer des leçons simples à votre travail de conception. La plupart des techniques présentées s’appliquent à un large éventail d’art et de design, mais nous nous concentrerons sur l’aspect numérique. En plus du nombre d'or, envisagez d'autres outils utiles qui peuvent aider au développement de la disposition des sites.
La proportion divine
La proportion divine est également connue sous le nom de nombre d'or. C'est une constante mathématique proche du chiffre 1.618 utilisée pour décrire le rapport entre deux éléments. Ce rapport est utilisé depuis le début de la période de la Renaissance, lorsque les concepts d'art du nouvel âge ont explosé.
Les artistes de cette période ont considéré le rapport comme magique et détiennent des pouvoirs divins mystiques lorsqu’ils sont intégrés à la conception. Il y a des centaines d'années, cela s'appliquait principalement à l'architecture, aux sculptures et aux peintures, mais aujourd'hui, nous pouvons utiliser ces mêmes techniques dans notre art numérique.
Le rapport est mieux décrit mathématiquement. C'est un peu déroutant à comprendre au début, mais nous pouvons remplacer chaque variable utilisée dans l'équation par des nombres réels, afin que les choses commencent à avoir un sens un peu plus. Nous travaillons uniquement avec 2 variables - appelons-les une et b. Les éléments fonctionnent dans un nombre d'or lorsque a + b / a est équivalent à un B.
Vous pouvez tester cela avec n'importe quelle valeur des deux variables pour voir ce que vous obtenez. En fin de compte, vous voudrez vous retrouver avec 1,61803398 (ou tout simplement 1,618) comme réponse. Puisque les proportions avec lesquelles nous travaillons ne sont pas définies sur une valeur spécifique, nous pouvons supposer que n'importe quel nombre de valeurs équivaut à une proportion égale. Cela laisse notre travail de conception flexible et relatif à la taille plutôt que de rester dans un domaine de nombres absolus.
Fonctions mathématiques dans le rapport
Une astuce intéressante est formée en travaillant uniquement avec le ratio lui-même et des variables hors de notre système global. Prenons par exemple le système de grille 960 divisé en 2 colonnes. Nous ne savons pas quelle est la taille de chaque colonne pour garder notre structure dans les proportions divines, mais nous avons suffisamment de chiffres pour la comprendre.
960 (représentés en unités de pixels) détient notre valeur de a + b. Nous pouvons donc diviser 960 en 1.618 pour obtenir la valeur de notre côté le plus long, qui est représentée par notre variable a. Dans ce cas 960 / 1.618 sort à 593px.
En utilisant cette nouvelle information, nous pouvons soustraire 593 de 960 pour obtenir la largeur de notre colonne latérale - 367. Si nous voulons vérifier notre réponse, nous pouvons prendre 593 + 367 (960) et la diviser par notre plus grande valeur de côté 593. vous devriez obtenir une valeur de retour d'environ 1,618, exactement égale à notre nombre d'or. Ta-da!
Cette technique est essentielle pour développer des présentations fluides pour des sites Web dynamiques. La proportion divine aide à garder les choses organisées de la manière la plus naturelle et naturelle possible. Si vous le souhaitez, vous pouvez également organiser votre conception en dispositions de 3 ou 4 colonnes. Avec cette option, vous auriez besoin de tester votre apparence et la taille totale de votre mise en page.
Si vous ne pouvez pas calculer une proportion fixe pour votre site, ne vous laissez pas aller à la sueur. Le ratio divin n'a pour but que de vous guider en tant que concepteur, et non de vous forcer à utiliser des valeurs numériques exactes partout. Tant que votre conception peut supporter son propre poids et conserver une impression uniforme sur toute la page, vous devriez être d'accord.
En règle générale, vous pouvez utiliser le rapport 5: 3 - même s'il n'est pas exactement égal au nombre d'or, il devrait fournir des résultats suffisamment proches pour prendre en compte les erreurs.
Décrire la règle des tiers
Lors de l'optimisation de la mise en page de votre site, les choses peuvent ne pas toujours être parfaites. C’est la voie de la conception Web et il n’ya aucune raison de suivre ici les directives précises. La règle des tiers est presque un simplifié? Paresseux? façon d'appliquer une proportion d'or.
Cela ne va pas vous donner des résultats médiocres ou des sites Web difformes, loin de là. Mais il s’agit d’une approche décontractée de la conception de ratios que beaucoup trouveront supérieure aux calculs exacts.
La règle stipule que vous pouvez diviser n’importe quelle maquette ou œuvre d’art en neuf carrés égaux. Ceci est accompli en plaçant 2 lignes verticales et 2 lignes horizontales équidistantes dans l'image entière. Les quatre points de l'image où vos lignes se rencontrent sont les "points chauds". pour votre site web. En termes généraux, ces zones doivent contenir le contenu le plus important axé sur l'utilisateur.
Une approche intéressante de ce problème consiste à diviser à nouveau chaque colonne en deux. Cela vous donne une grille uniformément répartie sur votre site avec des proportions définies à tous les niveaux. Ainsi, votre carré en haut à gauche contiendra l'essentiel de l'image de marque de votre site (logo, navigation, zone de titre?). Sinon, votre carré en haut à droite peut contenir des informations moins importantes divisées en descendant votre site verticalement.
En vous concentrant sur chaque point intérieur de la conception du site, vous pourrez savoir où garder les en-têtes, les boutons, les liens, etc. Pour rappeler que ce n'est pas une règle stricte, tous les concepteurs doivent suivre pour contrôler leur mise en page. Il s’agit simplement d’une idéologie qui a été appliquée à d’innombrables principes de conception et qui a fait ses preuves dans la mise en page complexe de sites Web. Cela est encore plus facile à utiliser car le logiciel de conception Adobe est livré avec des outils permettant d'activer les grilles dans vos fichiers. À quel point les choses pourraient-elles devenir plus faciles?
Le rectangle d'or
Comme son nom l'indique, il est possible de créer un rectangle d'or en appliquant le même rapport que celui dont nous avons discuté géométriquement. Le côté le plus long de votre rectangle devrait contenir votre valeur la plus longue, ou variable une, tandis que le côté le plus court représenterait votre variable b valeur. Cette forme peut également être largement appliquée dans les modèles de conception et autres éléments graphiques, notamment les logos et les icônes plus petites.
Ces pièces spéciales de géométrie peuvent vous guider dans la résolution de tous les problèmes de mise en page ou d’éléments avec lesquels vous pourriez vous inquiéter. Plus spécifiquement, vous pouvez définir des images de stock ou des affichages Flash fantaisie placés dans le contenu de votre site. Ces rectangles peuvent également être utilisés dans vos zones de pied de page ou de barre latérale pour délimiter des éléments individuels ou des widgets.
Bien sûr, l’utilisation la plus répandue dans ce domaine est le contenu dynamique. Lorsque vous placez des galeries de photos ou des œuvres dans un portefeuille, vous devez considérer les rectangles dorés comme délimiteurs. Les sites Web de commerce électronique peuvent faire beaucoup mieux avec ce rapport, car ils affichent des produits non seulement en rangées, mais également en colonnes riches en contenu, également répartis dans des rectangles dorés.
Je ne suis pas ici pour suggérer que chaque élément de votre page soit pavé de rectangles dorés. En fait, l'alignement et les grilles tiennent compte de nombreuses considérations pour vous tenir au courant des défauts de conception que vous êtes en train de créer. Ceci est juste un autre outil en plus des innombrables autres utilisés pour créer une belle présentation.
Conclusion
Nous avons examiné un peu plus loin le Golden Ratio pour comprendre comment il pouvait être mis en œuvre dans les travaux de conception modernes. Les systèmes de grille peuvent être capricieux et travailler dans les proportions divines permet aux espaces de pose fixes et élastiques de respirer et de se mettre en place. Vous ne devriez pas baser toute votre mise en page sur ces constantes mathématiques. Mais vous pouvez obtenir un énorme avantage en démarrant dans ce secteur et en considérant la disposition de la grille de votre site Web.
Il existe des modèles de grille gratuits étonnants disponibles au téléchargement pour vous aider durant ce processus. Celles-ci sont excellentes si vous n'êtes pas sûr de pouvoir sauter la tête la première dans les proportions de la conception et si vous souhaitez travailler sur des bases solides.
Essayez d'appliquer ces idées dans votre prochain dessin et voyez comment les choses se passent. Des structures et des structures organiques associées à des mathématiques naturellement puissantes peuvent permettre de créer un site Web époustouflant.