Share
Le Golden Ratio est utilisé dans toutes les mises en page graphiques, en particulier pour équilibrer un contenu lourd en texte. Cela peut aider les concepteurs à créer une hiérarchie et à attirer l'attention des utilisateurs sur des zones spécifiques. Découvrez les exemples de sites Web suivants et voyez comment les concepteurs s'en servent.!
Le Golden Ratio est un ratio mathématique commun à la nature et utilisé dans la théorie du design classique pour créer des compositions équilibrées. Il est à peu près égal à 1,6180, est également connu comme le "Golden Mean", le "Golden Section", et est désigné par la lettre grecque Phi "".
Un «rectangle d'or» est un rectangle dont la longueur est 1,6180 fois sa largeur. Par exemple, un div qui a un côté de 300px et un autre de 300 * 1.6180 ≈ 485px pourrait être considéré comme un rectangle d'or.
Si vous coupez un carré parfait dans ce rectangle doré, il vous restera un autre rectangle doré..
Vous pouvez faire la même chose pour le petit rectangle, puis la même chose indéfiniment en vous donnant cette image familière:
La séquence de Fibonacci est similaire au nombre d'or, mais pas exactement. C'est une série de nombres où le prochain chiffre de la séquence est la somme des deux précédents. Par exemple: 0, 1, 1, 2, 3, 5, 8
Si nous commençons avec un carré parfait, puis en y ajoutant un autre, nous obtenons un rectangle:
Continuez à ajouter des carrés le plus longEnsuite, nous ajoutons un autre carré, égal à la plus grande longueur de la forme totale:
Puis encore et encore:
Cela peut durer indéfiniment, nous donnant le même effet que notre rectangle d’or, mais cette fois-ci, au lieu de s’estomper. Le nombre d'or et la séquence de Fibonacci nous donnent des proportions tout aussi attrayantes.
Analysons maintenant quelques sites Web où nous pouvons les voir en action.
votrelocalstudio.dk“Your Local Studio” est un studio de conception et de développement basé à Copenhague, au Danemark. Ils se spécialisent dans l'utilisation de concepts visuels sous toutes leurs formes pour créer des expériences qui améliorent l'environnement.
Le site Web utilise ici le nombre d'or pour deux de ses trois pages. La page d'accueil est un aperçu conceptuel des principaux travaux. Cependant, lorsque vous visitez la page studio, elle mélange un peu de la présentation Web traditionnelle avec des formes rectangulaires dorées, tout en faisant défiler la page..
Vous voulez vous démarquer dans la foule? Yourlocalstudio (YLS) l’a fait en utilisant le nombre d’or dans la conception de son site Web. La conception présente un aspect progressif avec un système de grille défini. On pourrait dire que ces jours-citout ressemble à du bootstrap… Gardez un œil sur de plus en plus de sites cherchant à attirer l'attention avec une mise en page structurellement plus dynamique.
mashable.comMashable est un site d'informations. une source d'informations, de connaissances et de ressources pour la «génération connectée».
J'ai utilisé le test Golden Ratio de UX Triggers pour montrer comment Mashable utilise la séquence de Fibonacci dans sa présentation. La mise en page du contenu est flexible, avec le titre à gauche et des liens vers d'autres nouvelles à droite, séparés par les grilles..
Le nombre d'or est efficace ici, car il permet à un site très axé sur le contenu de donner de la typographie. espace de respiration. Des sites similaires peuvent sembler plus chargés en contenu, en utilisant des dispositions de grille traditionnelles, mais Mashable démontre que le nombre d'or peut être efficace même lorsqu'il est invisible..
www.jandk.frJackson & Kent est une agence de production web française. Ils sont spécialisés dans les services numériques tels que HTML5, CSS3, Drupal, Wordpress, PHP / MySQL, Flash, etc..
La capture d'écran ci-dessus montre comment la mise en page comprend en grande partie le travail du client précédent. Il comporte également un bloc de contenu relatif à l'agence elle-même et une barre de navigation au centre de l'écran. Comme indiqué ci-dessous, le bouton de contact utilise également le nombre d'or comme système de grille pour organiser la mise en page de manière unique..
L'exemple ci-dessous vous encourage à parcourir le site Web et à explorer son contenu horizontalement. La vue quadrillée et les formes de bloc de tailles différentes rendent le contenu plus intéressant visuellement. Comme les utilisateurs sont susceptibles de visualiser le contenu sur un ordinateur de bureau (ainsi que sur une tablette), des numéros de pagination apparaissent sur la navigation sur l'axe horizontal. Il s'agit d'un moyen innovant de visualiser chaque contenu, mais également l'interface utilisateur dans son ensemble..
Le nombre d'or attire naturellement l'œil des utilisateurs vers des points spécifiques au sein d'une interface utilisateur. En tant que concept, il peut vous aider à réfléchir à l'emplacement du contenu et à l'utilisation efficace de la hiérarchie. La combinaison de la mise en page, de la typographie, de la couleur et des principes généraux vous aidera à faire passer vos conceptions au niveau supérieur..
Accentsconagua