Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design

Rendre votre design web plus efficace avec le nombre d'or

by
Length:ShortLanguages:

French (Français) translation by Henri Lotin (you can also view the original English article)

Le nombre d'or est utilisé dans des mise en pages graphiques de toutes sortes, notamment pour équilibrer le contenu à gros volume de texte. Il peut aider les designers à créer la hiérarchie et à attirer les yeux des utilisateurs sur des zones spécifiques. Consultez les exemples suivants de sites web et voyez comment les designers en font usage !

Qu'est-ce que le nombre d'or ?

Le nombre d'or est un ratio mathématique, communément trouvé dans la nature et utilisé dans la théorie classique de design pour créer des compositions équilibrées. Grossièrement, il équivaut à 1,6180, et est également connu comme la « moyenne d'or », la « section d'or » 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, une div qui a un côté de 300px et une autre de 300 * 1.6180 ≈ 485px pourraient être considérées comme un rectangle d'or.

Si vous coupez un carré parfait à partir de ce rectangle d'or, vous allez rester avec un autre rectangle d'or.

Vous pouvez faire la même chose pour le plus petit rectangle, puis la même chose encore une fois, indéfiniment, ce qui vous donnera cette image familière :

La séquence de Fibonacci

La séquence de Fibonacci est similaire au nombre d'or, mais pas exactement pareille. C'est une série de nombres où le nombre suivant dans la séquence est la somme des deux précédents. Par exemple : 0, 1, 1, 2, 3, 4, 7

Si nous commençons avec un carré parfait, puis y ajoutons un autre nous obtenons un rectangle :

Nous continuons d'ajouter des carrés le long de la dimension la plus grande

Ensuite, nous ajoutons un autre carré, dont le côté est équivalent à la dimension la plus grande de la forme totale :

Puis encore et encore :

Cela peut durer indéfiniment, en nous donnant le même effet que notre Rectangle d'or, mais cette fois, mise en place au lieu d'être haché menu. Tant le nombre d'or que la séquence de Fibonacci nous donnent des proportions tout aussi attrayantes.

Nous allons maintenant analyser quelques sites où on peut les voir en action.

Exemple #1 : YStudio

yourlocalstudio.dk

En quoi consiste ce site web ?

« Your Local Studio » est un studio de design et de développement basé à Copenhague, Danemark. Ils sont spécialisés dans le travail avec des concepts visuels de toute forme pour créer des expériences qui améliorent l'environnement.

Comment utilise-t-il la moyenne d'or

Le site web ici se sert de la moyenne d'or pour deux de ses trois pages. La page d'accueil est une vue d'ensemble conceptuelle des œuvres clés. Toutefois, lorsque vous visitez la page studio il mélange un peu de mise en pages web traditionnelle avec des formes rectangulaires de la moyenne d'or lorsque vous faites défiler la page vers le bas.

Pourquoi c'est efficace

Vous voulez vous démarquer dans la foule ? Yourlocalstudio (YLS) l'a fait en utilisant le nombre d'or dans le design de son site web. Le design propose un look progressif avec un système de grille défini. Vous pourriez argumenter que, ces jours-ci, tout ressemble à bootstrap... Gardez un œil sur des sites de plus en plus nombreux qui cherchent à attirer l'attention avec une mise en pages plus structurellement dynamique.

Exemple #2 : Mashable

mashable.com

En quoi consiste le site ?

Mashable est un site d'information ; une source d'informations, de connaissances et de ressources pour la « génération connectée ».

Comment utilise-t-il la moyenne d'or

J'ai utilisé le test du nombre d'or de UX Triggers pour démontrer comment Mashable utilise la séquence de Fibonacci dans sa mise en pages. La mise en pages du contenu est flexible, avec le titre vers la gauche et des liens vers d'autres actualités sur la droite, séparées par des grilles.

Pourquoi c'est efficace

Le nombre d'or est efficace ici, car il permet à un site très orienté contenu de donner un espace de respiration à la typographie. Des sites similaires peuvent paraître plus denses en contenu, en se servant de grilles traditionnelles de mises en pages, mais Mashable montre que le nombre d'or peut être efficace même quand il est invisible.

Exemple #3 : Jackson & Kent

www.jandk.fr

En quoi consiste le site ?

Jackson & Kent est une agence de production web de France. Ils sont spécialisés dans les services numériques tels que HTML5, CSS3, Drupal, WordPress, PHP/MySQL, Flash etc.

Comment utilise-t-il la moyenne d'or

La capture d'écran ci-dessus montre comment la mise en pages inclue en grande partie les travaux antérieurs de clients. Elle fait également figurer un bloc de contenu sur l'agence elle-même et une barre de navigation au centre de l'écran. La section contact, comme indiqué ci-dessous, utilise également la moyenne d'or comme un système de grille pour organiser la mise en page de façon unique.

Pourquoi c'est efficace

L'exemple ici vous encourage à vous représenter un panorama du site web et à en explorer le contenu horizontalement. La vue quadrillée et les blocs de formes de différentes tailles rendent le contenu plus intéressant visuellement. Comme les utilisateurs sont plus susceptibles d'afficher le contenu sur un desktop (tout comme sur une tablette), il y a des numéros de pagination sur l'axe horizontal de la navigation. Il s'agit d'un moyen innovant pour afficher chaque élément de contenu, mais également l'interface utilisateur dans son ensemble.

Conclusion

Le nombre d'or conduit naturellement les yeux de l'utilisateur sur des points spécifiques au sein d'une interface utilisateur. En tant que concept il peut vous aider à penser efficacement la mise en pages de contenu et l'utilisation de la hiérarchie. La combinaison de la mise en pages, de la typographie, de la couleur et des principes fondamentaux aidera à faire passer vos conceptions au niveau supérieur.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.