Nombre d’or, suite de Fibonacci et autres grilles de ...vigraphism.free.fr/process/dlweb/boite/nbre_or.pdf · Conception de site web, Design & Graphisme Nombre d’or, suite de

Conception de site web, Design & Graphisme

Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web Cet article est composé de plusieurs chapitres. Cliquez sur chap. pour accéder à la suite.

chap. 1 chap. 2 chap. 3

Dans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1 proposé par Information Architect (iA) . L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. C’est la démontration réussie que l’on peut appliquer les règles de mise en page du monde de l’imprimé à l’écran, sans rien sacrifier. Je l’avais presque oublié.

De l’architecture cosmique aux coquillages…

Parmi les applications de la suite de Fibonacci , la spirale logarithmique permet de concevoir des grilles de mise en page harmonieuses. Cette suite de chiffre est très proche du nombre d’or qui a inspiré les plus grands artistes.

Ce nombre d’or peut-être utilisé de différentes manières. Il est possible, par exemple, de créer un rectangle d’or dont le rapport entre la longueur et la largeur vaut le nombre d’or, soit 1,618 en simplifiant.

Ce rectangle d’or peut servir à “construire une spirale d’or en traçant des quarts de cercle dans chaque carré. Cette spirale se rapproche d’une spirale logarithmique .”

Nous pouvons voir cette spirale à l’oeuvre dans la nature sous des formes diverses, que ce soit dans la forme de certaines galaxies, ou dans la construction des certains animaux.

La forme de ce nautile est très proche d’une spirale logarithmique.

Une galaxie qui vaut son pesant d’or ?

… En revenant au design d’un site web

C’est bien beau, mais comment faire pour mettre ce nombre d’or en pratique pour construire une grille de mise en page ?

Avec The Ideal Website, iA apporte sa réponse en utilisant la série de Fibonacci pour déterminer la taille et la distance des éléments entre eux.

Différence entre la mise en page pour l’imprimé et l’écran »


Cet article est composé de plusieurs chapitres. Cliquez sur chap. pour accéder à la suite.

Tags : Charte graphique, Mise en page, Tutoriels, Webdesign

Publié le 25 février 2008 par Bruno Bichet.

« Articles précédents et suivants dans la même rubrique »

Conception d’un thème magazine de A à Z — A comme “Allons-y !” » « 10 principes pour un design web efficace

Ca peut vous intéresser »

• Quelques notes sur la conception d’une charte graphique (12) • Frameworks CSS + Reset CSS : design from scratch (16) • Créer le logo et la charte graphique de mon nouveau blog en 4 étapes (17) • 5 règles simples pour gérer l’affichage de votre texte dans vos mises en page (22) • Vos positions s’affaissent ? Mettez le bottom à zéro… (3)

40 participations à l'article

1. 1 Alexandre a parlé le 25 février 2008 à 22:24 | Permalien

Juste un truc : OMG !

2. 2 leGizz a parlé le 25 février 2008 à 22:29 | Permalien

Et toi ? Utilises-tu l’une des ces règles ?

3. 3 Bruno Bichet a parlé le 25 février 2008 à 22:40 | Permalien

@Alexandre : lol ;)

@leGizz : rarement à vrai dire, autant quand je faisait de la pao j’utilisais toujours une grille pour placer mes éléments, autant sur le web, je fais au mieux avec la résolution des écrans…

Par exemple pour le design de css4design j’ai fait en sorte que la lecture ne soit pas trop pénible en 800×600 : un coup de scroll latéral permet d’avoir soit la colonne de gauche + le contenu ou le contenu + la colonne de droite.


Ok, ça me rassure ;)

…je ne voudrai pas être le seul à ne pas utiliser ma calculette pour webdesigner :p


@leGizz, ceci dit, ce billet a été une manière d’explorer à nouveau le concept de grille pour m’en servir un peu plus à l’avenir ;)


Of course ! Il est toujours bon d’essayer de nouvelles techniques, même si c’est pour revenir aux anciennes méthodes par la suite (ça m’arrive assez régulièrement). Dans tous les cas c’est formateur.

Petit oubli dans mon premier commentaire : félicitation pour cet article !

7. 7 Vincent V a parlé le 25 février 2008 à 23:25 | Permalien

Merci, merci, merci pour cet article.

En quelques ligne je me suis retrouvé 7 ans en arrière sur les bancs de la fac la première fois où j’ai entendu parler du nombre d’or et de la suite de Fibonacci.

J’utilise la règle des tiers pour la plupart de mes photos http://www.flickr.com/photos/hapax-pict/ mais je n’ai jamais vraiment utilisé ces principes pour mes sites.

Raaahhhh ça y est j’ai envie de refaire toutes mes mises en pages !!!

8. 8 gabyu a parlé le 26 février 2008 à 00:01 | Permalien

un grand classique que ce nombre d’or, merci pour les explications en langue francaise

Gabriel

9. 9 Cedric a parlé le 26 février 2008 à 00:04 | Permalien

Damned, en voilà un article passionnant ! Comme Vincent, ca me donne aussi envie de refaire tous mes sites…

10. 10 pickupjojo a parlé le 26 février 2008 à 03:38 | Permalien

Excellent article dont j’ai lu la quasi-majorité, son contenu étant excellent mais peut-être un peu poussé parfois. Bref, je vais me coucher moins bête et me rends compte que le design de mon blog n’a rien de ‘parfait’. :)

11. 11 burningHat a parlé le 26 février 2008 à 11:12 | Permalien

Hi, excellent article amigo… très clair et bien construit ! Question: tes récentes lectures sont-elles liées à tes (ré-)explorations des designs par grilles ? ;) (tout ça pour dire: j’ai toujours pas eu ton retour sur “Transcending CSS” :p)


@burningHat > En fait, j’ai fait le ménage dans ma bibliothèque et je suis tombé sur des vieux bouquins sur le secrétariat de rédaction, la mise en page, que j’ai relu avec plaisir.

Quant à Transcender CSS, je l’ai acheté suite à ces lectures dans l’espoir d’y trouver des méthodes modernes, efficaces pour le design web, mais de ce point de vue, j’ai été très déçu…

Il y a bien des chapitres très intéressants sur le balisage d’un document, etc. sur la sémantique des balises, sur les grilles, mais en revanche, j’ai trouvé les techniques de “prototypage” un peu “foutage de gueule” : je cherchais, moi, des techniques pour faire des vrais sites et pas des maquettes à présenter au client !

Donc, je suis un peu partagé sur le bouquin. Mais j’essaierais de faire une note dessus à l’occasion ;)o


Yop j’ai comme l’impression qu’on va partagé un avis mitigé sur ce bouquin les deux :p (je passe des “oh c’est excellent !” à des “hin ? il rigole ?” dubitatifs à chaque relecture de passages :D).

Tu pourrais faire passer les titres, ISBN, etc des bouquins que tu as relu avec plaisir stplé ? c’est le genre de trucs qui m’intéresse au plus haut point ! :D


@burningHat > C’est vrai que j’aurais pu mettre la bibliographie. Allez, je la rajoute à la fin du billet ;)

15. 15 Aymeric Jacquet a parlé le 26 février 2008 à 18:22 | Permalien

T’es un grand malade bruno.

16. 16 DavidM a parlé le 27 février 2008 à 01:43 | Permalien

Excellent article, à relire le matin

Pour rajouter une pierre (ou un caillou) les cinq côtés du pentagramme ont un rapport de 1.618, tout comme le Nombre d’Or. Et dans la nature on le retrouve dans la répartition des graines dans une fleur de tournesol ou de marguerite.

17. 17 Jeff a parlé le 27 février 2008 à 09:05 | Permalien

Tiens un petit programme dont je me sers raisonnablement (en ligne ou téléchargeable d’ailleurs) qui calcule des chiffres selon le nombre d’or : phiculator :

> http://www.thismanslife.co.uk/.....phiculator


@Bruno : Merci beaucoup !

@Jeff : sympa ton lien ;)

19. 19 Forge a parlé le 27 février 2008 à 10:14 | Permalien

Autodidacte, j’ai longtemps cherché ce type d’éclairage pour mes maquettes et je tiens à te remercier pour cet article, que je trouve excellent.

Il me permet d’entendre enfin parler de structure de l’image (au sens “ce qui est vu”). Des idées à creuser, de nouvelles voies à explorer, un nouveau monde quoi. Ca, plus la lecture de l’excellent bouquin d’Amélie “ergolab” Boucher… “y a pu ka” :-)


@DavidM > Merci pour l’info, il y a aussi la croissance des feuille d’un arbre qui suit, parait-il la suite de Fibonacci. Je savais pas pour le pentagramme.

@Jeff > PMerci ! Je l’avais dans mes tablettes, mais comme ça faisait longtemps que j’avais commencé l’article, dans ma précipitation à le publier, j’ai complètement zappé la liste de liens utiles à la fin… C’est vrai que phiculator est très pratique.

@Forge > Ton commentaire me fais très plaisir et m’encourage à me lancer dans l’écriture d’autres articles sur le sujet, en adaptant pour le web les techniques utilisées dans le monde du print.

21. 21 artxtra a parlé le 27 février 2008 à 16:31 | Permalien

Excellent article. J’ai toujours bien distingué les logiques de conception entre web et print, mais c’est vrai que la question des proportions, ou grille de design, est commune aux 2. Cela dit, avec les écrans de portable (et de mobile), le rapport 1.33 est faussé. Je me suis amusé une fois à faire un script qui calculerait le ratio largeur/hauteur de la fenêtre d’affichage, et génèrerait un design harmonieux en conséquence, mais c’est vite devenu une vraie usine à gaz…


@artxtra > je l’évoque rapidement dans l’article, mais effectivement, une des raison du faible emploi des grilles basées sur le nombre d’or ou la suite de fibonacci provient

essentiellement du nombre d’info à maquetter. Dans le print, ces grilles sont plutôt réservés à des ouvrages sur les arts ou les collections haut de gamme.

L’utilisation d’une grille est plus fréquente et la plupart du temps on en utilise une sans même s’en rendre compte ; on peut faire des designs qui tiennent la route sans pour autant expliciter la grille. Mais après quelques essais, je me rend compte que le temps passé à mettre une grille en place peut-être rentabilisé assez rapidement par la suite.

En tout cas, cet article devrait avoir des petits sous peu ;)


j’ai hâte de les lire, alors ;-)


Je connaissais la suite de F., et la théorie qui dit qu’une image doit être structurée, et gna gna gni, et gna gna gna. En attendant, ça ne me disait pas comment ça marchait. Donc je réitère mes félicitations (ça fait “lèche-bottes” mais je vous assure que je suis très reconnaissant à M. BB pour cette mise en lumière).

“En tout cas, cet article devrait avoir des petits sous peu.”

Bon, ben j’ai plus qu’à me RSS’iser. Vivement les petits !


@Forge > “Lèche-bottes” c’est quand les compliments ne sont pas mérités, tu ne risque rien ^_^v

En tout cas, au risque de donner l’impression de caresser les lecteurs dans le sens du poil, je réitère à mon tour mes remerciements pour tes remerciements :))

En tout cas pour la suite, ça me donne le courage de me replonger dans le bouquin Grids… pour voir comment je peux adapter les conseils donnés (pour le print à l’origine) au design web

26. 26 Nicolas a parlé le 28 février 2008 à 17:27 | Permalien

Excellent post ! Voici une variante que j’utilise en print et en web : plutôt que de prendre en référence la taille de la typo, je prends la taille de l’interlignage (la grille de ligne de base en PAO), les résultats sont assez amusants surtout si on utilise un Fibonacci entrecroisé (où l’interligne ET la taille de typo sont dans la suite), cela a visiblement servi au Modulor de Le Corbusier. Tout cela est tiré de l’excellent ouvrage “The Elements of Typographic Style” de Robert Bringhurst grâce auquel j’ai pu faire le lien entre rythme (musical) et les espaces dans la page.

27. 27 Acidifié, Blog SEO a parlé le 2 mars 2008 à 11:24 | Permalien

Pourquoi une mise en page qui respecte cette suite serait-elle harmonieuse ?

28. 28 Bruno Bichet a parlé le 2 mars 2008 à 16:01 | Permalien

@Nicolas > l’exemple de la typo que j’ai donné sert surtout d’illustration, mais on pourrait tout aussi prendre la largeur d’un visuel, ou même pourquoi pas la largeur d’un encart publicitaire pour bâtir une mise en page harmonieuse… Ou, encore la largeur d’un widget indispensable qui pourra ainsi être mis en valeur.

Ce qui m’amène harmonieusement :°) à la question de @Acidifié. J’ai plusieurs pistes de réponses qu’il faudrait détailler, mais on peut déjà élargir la question à pourquoi des choses sont considérées comme harmonieuses et d’autres pas.

1) Comme l’a démontré Léonard de Vinci, le corps humain est construit selon des proportions qui n’ont rien d’hasardeuses, il ne semble donc pas illogique que l’oeil humain soit sensible à certaines proportions.

2) Un des canons de la beauté chez les êtres humains est basé sur la symétrie car notre corps (mais aussi pratiquement tous les être vivants) l’est aussi.

Une mise en page idéale devrait donc être - si je reste fidèle à la raisons n°1 - symétrique. Mais c’est sans compter une caractérique importante chez l’humain : l’ennuie.

Nous nous ennuyons vite et destestons les choses répétitives, de sorte que pour maintenir l’attention, il est important d’apporter des éléments asymétriques pour booster l’intérêt.

Mais, comme le besoin de symétrie est toujours là, il faut fournir une asymétrie qui ait du sens pour le cerveau, par exemple la règle des tiers qui est très présente dans les proportions de l’être humain (cf Vitruve).

Voilà. Pour finir, je dirais que ces proportions “mathématiques” ne sont pas sorties d’un chapeau quelconque, mais sont le résultat d’observations empiriques de choses que l’on trouve dans la nature, source de toute harmonie…

3) Reste que le débat est toujours ouvert sur ce qu’est le beau, vue que tous les goûts sont dans la nature…

Sinon, tu peux jeter une oeil sur cet article consacré à la création d’une charte graphique qui reprend les fondamentaux avec pas mal de liens.


Mouais, ça reste à prouver tout ça, d’autant plus que l’homme de Vitruve n’a rien à voir avec le nombre d’or ou la suite de Fibonacci ;)

30. 30 Jeff a parlé le 3 mars 2008 à 14:53 | Permalien

S’il n’y a certes pas “trace” direct du nombre d’or dans l’homme de Vitruve, Leonard de Vinci a néanmoins réalisé ce croquis selon ce qu’il a pu observé dans la Nature. Et il n’est point besoin d’aller chercher très loin pour remarquer que ce chiffre/ce rapport est très présent. Si tu regardes bien les tableaux de De Vinci, tu remarqueras que la composition des tableaux tient souvent compte du rectangle d’or. Ce n’est pas pour rien que ses tableaux dégagent une telle harmonie. Je dirai surtout qu’il suffit de faire des tests. Prends deux photos d’un personnage. D’un côté tu le cadres au milieu comme tout un chacun serait tenté de faire. Et prends en une seconde mais en plaçant le personnage un peu en bas à droite (plus ou moins le rectangle ABCD de la spirale d’or), eh bien tu remarqueras que la photo est bien plus “impactante” dans le second cas. Sa lecture sera bien plus confortable.


Reste bien sûr que le nombre d’or n’est pas la seule technique efficace (règle des 2/3, gestion du Noir, etc.). Mais son efficacité est prouvée :)

32. 32 netrun a parlé le 6 mars 2008 à 15:52 | Permalien

Merci pour ce billet. Je viens de “retrouver” ce que j’avais appris en PAo et en Typo… Utiliser unsysteme de grille pour un maquettage parait assez evident, mais la structurer selon le “nombre d’or” est un sacre challenge, pourtant, je crois qu’en web comme en impression, cela peut vraiment apporter un “plus”, une touche indefinissable de classe. La vraie question ne serait elle pas: pourquoi, du moins dans les alphabets occidentaux, ce type de rapport parait tellement “confortable” a voir? Je verifierai un de ces 4 avec un alphabet autre, juste comme ca ;)


@netrun > oui, effectivement, l’utilisation d’une grille est assez évident lorsqu’on a une formation de graphiste ou d’infographiste, mais il y a énormément de gens qui font des sites internet avec un background parfois très éloigné du graphisme (développeurs, webmaster, gérant de boutique en ligne, etc.) pour qui la notion de grille de mise en page est totalement étrangère.

@jeff > je me suis limité au nombre d’or et à fibonacci parce qu’à l’origine, je voulais juste présenter le thème The ideal Website, et je me suis laissé emporté par les événements ;)

Il reste énormément de technique de mise ne page à explorer.

34. 34 Francis a parlé le 29 avril 2008 à 09:28 | Permalien

Je viens de découvrir cet article via un autre, et je me suis dit: “comment j’ai pu passer à travers ?… Il est pas si vieux pourtant ?? O_o “

Mon avis là-dessus est assez partagé. J’ai pas mal utilisé ces techniques en peinture et illustration, mais surtout au début en fait, lorsque j’étudiais. Le nombre d’or j’en ai entendu parler en long et en large comme quasiment d’un impératif… Idem pour les couleurs complémentaires et les sens de lecture des peintures. Du coup, quand tu te retrouves en face de ta toile, tu as tellement de contraintes que la créativité et l’imagination sont quasi complètement étouffés. Certains artistes y arrivent facilement mais la plupart de nos jours préfèrent s’exprimer de A à Z plutôt que de tenter de s’exprimer tout en devant prendre en compte plusieurs hypothèses.

Cela dit, ça peut être pris également comme une source de créativité, si on les utilise à bon escient. Par exemple, dans cet article de Mark Boulton, bien qu’on soit en print, on peut utiliser le nombre d’or ou tout autre “division” pour réaliser un système de grille. On divise et redivise pour arriver sur une grille au design particulier à partir duquel on peut s’exprimer.

Et c’est article m’a fait réfléchir puisque j’ai commencé des recherches de designs basées sur ce genre d’ergonomie. La première question que je me suis posée, c’est “nombre d’or ou pas nombre d’or ?”. Franchement, je reste assez réservé sur le côté “zen” d’un design doré. C’est vrai que c’est agréable mais est-ce que ça change vraiment quelque chose par rapport à placer la colonne 2 cms plus loin ? L’équilibre à trouver ne doit-il pas plutôt être personnel ?

C’est là que je reviens vers la créativité, mais au niveau du webdesign. Tu parles d’utiliser ces suites aussi bien pour l’agencement que pour la typographie. Pourquoi pas, mais ça me rappelle l’utilisation des couleurs complémentaires. Si l’association de 2 couleurs est censée être parfaite mais qu’elle ne me plaît pas ? Je dois la laisser comme tel ? C’est sûr que dans le milieu de l’Art, on apprécie ce genre de choses: “le gars a pondu une superbe oeuvre et en plus il a réussi à n’utiliser que des couleurs complémentaires…”. Perso, je me suis retrouvé à créer des travaux avec des associations de couleurs qui ne me plaisaient pas, avec un sens de lecture (bas à gauche vers haut à droite) qui ne me parlait pas, le tout en tenant compte de la règle des 3 tiers… Au bout de quelques mois, j’ai balancé tout ça à la poubelle et me suis concentré sur la créativité. Pas mal de personnes m’ont souvent dit que la créativité était souvent limitée du fait qu’on apprend trop ce genre de choses aux étudiants… A méditer…

Quoi qu’il en soit, pour le webdesign, je pense que c’est pareil. C’est très intéressant d’utiliser les suites de Fibonnacci, mais à condition que ça serve votre créativité. Ensuite, l’étendue de leur utilisation dépend ce que vous pouvez en faire…

Idem pour les grilles, mais là je trouve qu’au dela des dimensions de chaque espace, elles permettent une meilleure organisation et répartition…

Enfin, comme lecture, le bouquin incontournable pour les “grids”, c’est Grids Systems in Graphic Design. C’est en tout cas celui recommandé par les plus grands designers…

Encore merci Bruno pour cet article !! ;-)

35. 35 Francis a parlé le 24 mai 2008 à 17:47 | Permalien

Kazel machin chose, adepte de Fibonacci à ce que je vois !! :mrgreen: J’ai jamais trop compris l’intéret de ce genre de spam qui ne sert à rien sauf à emmerder le monde… ;-)

36. 36 Greg-J a parlé le 11 septembre 2008 à 14:47 | Permalien

énorme l’article… De quoi remettre en cause plus d’un webdesigner, moi le premier… Mais bon je rejoins quand même Fran6 sur un point : la créativité d’abord !!! On va pas non plus se pendre à cause d’un mec qui a pondu une suite de chiffre et qui n’a même pas connu Internet ;) !!

37. 37 wassy a parlé le 13 octobre 2008 à 15:41 | Permalien

Bonjour à tous,

Le lien vers “The Ideal Website 1.1″ ne mène plus directement au thème et… je n’arrive plus à le retrouver. Une idée ?

Merci,

BB.

38. 38 Bruno Bichet a parlé le 13 octobre 2008 à 16:23 | Permalien

@wassy: Yep, effectivement, le thème The Ideal Website semble avoir disparu des thème WordPress. En attendant, voici le lien depuis le site des auteurs : http://informationarchitects.j.....ebsite.zip

39. 39 mihai a parlé le 10 novembre 2008 à 05:08 | Permalien

Très bon article, comme quoi… la science exacte et l’art se rencontrent.

40. 40 jul a parlé le 4 janvier 2009 à 22:34 | Permalien

Merci pour ce bel article!

4 Trackbacks

1. Par Ultra-vite» Blog Archive » Fibonacci, le nombre d’or et le web le 5 mars 2008 à 13:41

[...] Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web par Bruno Bichet [...]

2. Par [annonce] Création d’un thème pour wordpress « Antoine Guiral : apprenti du web 2.0 le 23 mars 2008 à 03:49

[...] La première, c’est que je vais héberger mon blog chez un hébergeur classique (pour le moment il est chez wordpress) avec mon propre nom de domaine. Je pourrais ainsi personnaliser plus facilement mon blog. Et justement pour ce qui est de la personnalisation je me suis lancé dans la création d’un thème pour wordpress. Quoi?? Un thème pour wordpress?? Vivi! Mais je ne fonce pas tête baissée! Je suis en train de suivre les tutoriels de Fran6 et br1o pour voir comment fonctionne le moteur de templates de WP (wordpress). Ensuite place au design : croquis, photoshop, découpe, intégration, CSS. Puis transfert des billets, commentaires, etc etc. Pour le design je vais également suivre les excellents conseils de Br1o. [...]

3. Par Anonyme le 29 mai 2008 à 11:29

Nombre dor, suite de Fibonacci et autres grilles de mise en page pour le design web…

Si les plus grands artistes ont utilis les grilles de mise en page bases sur le nombre d’or ou la suite de Fibonacci, pourquoi ne pas s’en inspirer pour concevoir le design d’un site web ou d’un blog ? Cet article propose plusieurs pistes pour util…

4. Par D.o.D blogsign | le signalisation du web le 29 septembre 2008 à 11:13

[...] Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web » « Background CSS : des fonds hachurés avec la “positive attitude” [...]



Différence entre la mise en page pour l’imprimé et l’écran

Si les fondamentaux du graphisme et les habitudes de lecture ne sont pas bouleversés par le passsage de l’imprimé à l’écran, il y a une chose que l’on oublie parfois, c’est que les règles de mise en page d’un magazine papier ou d’un livre sont inextricablement liées depuis des centaines d’années au coût induit par l’ensemble des techniques d’impression : format, grammage, trame d’impression, noir et blanc, niveau de gris, quadri, ton direct, etc.

Ainsi, on notera que les collections bon marché présentent des marges et un interlignage réduits pour limiter le nombre de pages à imprimer. Les collections haut de gamme présentent, quant à elles, un contenu encadré par des marges généreuses savamment calculées pour offrir un rectangle d’empagement optimal.

Sur le web, les coûts liés au support sont en grande partie supportés par l’utilisateur (ordinateur, écran) et par l’éditeur (hébergement, bande passante). Ce qui implique qu’une grande partie des conditions dans lesquelles la page sera consultée échappe au concepteur. Parmi ces conditions : le format de l’écran (16/9ème, 16/10ème ou 3/4) ou sa résolution (1024 x 768, 1280 x 1024, 1440 x 900, etc.).

Les formats de base du design

En attendant d’avoir des écrans ronds, les formats de base de toute mise en page sur le web sont le carré et le rectangle (qui n’est d’ailleurs, qu’une version allongée du carré). Reste à déterminer les proportions idéales pour obtenir un “beau” rectangle à partir d’un banal carré.

En effet, toutes les proportions ne se valent pas : certaines seront plus harmonieuses que d’autres. Il existe plusieurs méthodes pour obtenir des rectangles aux proportions particulières à partir d’un carré :

A la recherche du format A4

Une technique simple pour obtenir un rectangle harmonieux

Avec votre logiciel de dessin préféré :

1. dessinez un carré et à partir du point inférieur gauche (A) tracez un cercle jusqu’au point supérieur droit du carré (C).

2. Prolongez ensuite les lignes A D et B C vers le haut, au moins jusqu’au point d’intersection avec le cercle (D1) pour la ligne A D.

3. Tracez un trait parallèle à D C à partir de D1 jusqu’au point C1 pour obtenir un rectangle en A B C1 D1 (ou en A B2 C2 D si vous travaillez dans l’autre sens).

Et voilà, deux colonnes prêtes à l’emploi !

Nous obtenons donc une base harmonieuse pour un design en deux colonnes équilibrées de manière géométrique avec des proportions dans un rapport de 1,4142 soit la racine carré de 2.

Ce ratio hauteur/largeur correspond à celui que l’on rencontre dans le format des feuilles de papier de la série A (A4, A3, A2, A1, A0, etc.) tel que définit par l’Afnor (Association française de normalisation).

Ce qui permet, lorsqu’on respecte le ratio du début à la fin de la mise en place d’une identité graphique pour une entreprise, d’harmoniser les formats : A4 (210 x 297) pour les lettre en-tête, et A7 (74 x 105) pour les cartes de visite, par exemple.

Le nombre d’or

L’exemple précédent utilisait le rapport de la racine carré de deux. Le nombre d’or quant à lui utilise le rapport 1,618 ou (1 + racine-carré de 5) / 2.

Soit une largeur totale de 450 pixels divisée par 1,618 pour un résultat de 278 pour la colonne la plus large et 172 pixels pour la sidebar. N’hésitez pas à arrondir en 280px et 170px pour simplifier ;)

L’emploi de la section dorée donne une impression de repos, de sécurité, de constance dans un rythme indéfiniment continué. R. Bouveresse dans le Nombre d’or, Psychologie n° 77, juin 1977.

La suite de Fibonacci

C’est en cherchant à décrire la la croissance d’une population de lapins que Fibonacci a sorti la série suivante : 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, etc.

Cette suite se caractérise par le fait que l’addition des deux premiers chiffres a le troisième comme résultat, et ainsi de suite (si j’ose dire…).

Représentation visuelle de la suite de Fibonacci

Remplir l’espace de la feuille blanche »








• Quelques notes sur la conception d’une charte graphique (12) • Frameworks CSS + Reset CSS : design from scratch (16) • Créer le logo et la charte graphique de mon nouveau blog en 4 étapes (17) • 5 règles simples pour gérer l’affichage de votre texte dans vos mises en page (22)

• Vos positions s’affaissent ? Mettez le bottom à zéro… (3)







@Alexandre : lol ;)


















Gabriel










Il y a bien des chapitres très intéressants sur le balisage d’un document, etc. sur la sémantique des balises, sur les grilles, mais en revanche, j’ai trouvé les techniques de

“prototypage” un peu “foutage de gueule” : je cherchais, moi, des techniques pour faire des vrais sites et pas des maquettes à présenter au client !




























@artxtra > je l’évoque rapidement dans l’article, mais effectivement, une des raison du faible emploi des grilles basées sur le nombre d’or ou la suite de fibonacci provient essentiellement du nombre d’info à maquetter. Dans le print, ces grilles sont plutôt réservés à des ouvrages sur les arts ou les collections haut de gamme.


















@Nicolas > l’exemple de la typo que j’ai donné sert surtout d’illustration, mais on pourrait tout aussi prendre la largeur d’un visuel, ou même pourquoi pas la largeur

d’un encart publicitaire pour bâtir une mise en page harmonieuse… Ou, encore la largeur d’un widget indispensable qui pourra ainsi être mis en valeur.













S’il n’y a certes pas “trace” direct du nombre d’or dans l’homme de Vitruve, Leonard de Vinci a néanmoins réalisé ce croquis selon ce qu’il a pu observé dans la Nature. Et il n’est point besoin d’aller chercher très loin pour remarquer que ce chiffre/ce rapport est très présent. Si tu regardes bien les tableaux de De Vinci, tu remarqueras que la composition des tableaux tient souvent compte du rectangle d’or. Ce n’est pas pour rien que ses tableaux dégagent une telle harmonie. Je dirai surtout qu’il suffit de faire

des tests. Prends deux photos d’un personnage. D’un côté tu le cadres au milieu comme tout un chacun serait tenté de faire. Et prends en une seconde mais en plaçant le personnage un peu en bas à droite (plus ou moins le rectangle ABCD de la spirale d’or), eh bien tu remarqueras que la photo est bien plus “impactante” dans le second cas. Sa lecture sera bien plus confortable.












Cela dit, ça peut être pris également comme une source de créativité, si on les utilise à bon escient. Par exemple, dans cet article de Mark Boulton, bien qu’on soit en print, on peut utiliser le nombre d’or ou tout autre “division” pour réaliser un système de grille. On divise et redivise pour arriver sur une grille au design particulier à partir duquel on peut s’exprimer.












Bonjour à tous,


Merci,

BB.







4 Trackbacks




[...] La première, c’est que je vais héberger mon blog chez un hébergeur classique (pour le moment il est chez wordpress) avec mon propre nom de domaine. Je pourrais ainsi personnaliser plus facilement mon blog. Et justement pour ce qui est de la personnalisation je me suis lancé dans la création d’un thème pour wordpress. Quoi?? Un thème pour wordpress?? Vivi! Mais je ne fonce pas tête baissée! Je suis en train de suivre les tutoriels de Fran6 et br1o pour voir comment fonctionne le moteur de templates de WP (wordpress). Ensuite place au design : croquis, photoshop, découpe,

intégration, CSS. Puis transfert des billets, commentaires, etc etc. Pour le design je vais également suivre les excellents conseils de Br1o. [...]








Remplir l’espace de la feuille blanche

Maintenant que vous avez décidé du meilleur rapport hauteur/largeur pour déterminer votre rectangle, il reste à occuper cet espace. On peut utiliser les mêmes techniques que pour la structure, mais les ratios paraitront souvent trop importants pour être utilisés dans des colonnes étroites ou même dans la zone de contenu selon la densité du éléments à maquetter.

La règle des tiers pour remplir votre rectangle

Parmi les techniques les plus utilisées dans les arts graphiques et la photographie, on trouve la règle des tiers qui vient à notre secours pour nous guider sur la meilleure façon de disposer les éléments de notre mise en page.

Il semble que les photographes et les peintres se soient plus que les autres appropriés cette règle de composition , mais rien n’empêche les webdesigners de s’en inspirer pour placer les éléments-clés de leur charte graphique.

Appliquer une grille en fonction du nombre de colonnes

Actuellement très en vogue dans le design des blogs de type magazine avec l’utilisation des frameworks CSS comme Blueprint , la mise en place d’une grille de mise en page en 6, 8, 12 ou 24 colonnes avec gouttière est relativement simple à mettre en place. Il s’agit de diviser la largeur de votre design en colonnes espacées par une gouttière (margin-right).

24 colonnes à la une en 950 px

Par exemple, Blueprint propose une grille pour un design fixe de 950 pixels de large divisé en 24 colonnes de 30 pixels espacées de 10 pixels, avec un interlignage de 18 pixels (soit un rapport de 150% par rapport à la taille du texte de référence — 12 pixels), soit la formule : largeur totale = (nombre de colonnes * 40) - 10 — où 40 est la valeur d’une colonne de 30px + une marge droite de 10px et où -10 est la valeur de la gouttière retranchée pour la dernière colonne.

Si vous ne voulez pas utiliser de framework prêt à l’emploi, rien ne vous empêche de créer votre propre grille que vous placerez en background de votre container principal pour l’avoir sous les yeux pendant le développement.

16 colonnes à la une en 960 px

La grille fournit par Blueprint est basée sur une largeur de 950px ou sur des multiples de 30 pixels pour les colonnes. Si vous voulez une largeur de 960 pixels, je vous propose une grille en 16 colonnes de 45 pixels chacune avec une gouttière de 16 pixels (le plus dur, c’est de tomber sur des valeurs entières, faut tâtonner un peu…), soit la formule suivante : largeur totale = (nombre de colonnes * 61) - 16.

En haut : élément de base pour la grille. En bas : le même élément répété en background sur le container.

La taille du texte comme point de référence ?

Avant de commencer à bâtir un design à partir de proportions — aussi divines soient-elles — il nous faut une valeur de référence. Il peut s’agir de la largeur d’un visuel ou d’une colonne de texte.

Dans le cas d’un blog constitué principalement d’articles, il peut être judicieux de partir du corps de texte le plus faible que vous aurez identifié : les notes de bas de pages, les mises en exergues ou les légendes des photos sont de bons candidats. Là, c’est à vous de baliser (n’ayez pas peur…) l’ensemble de votre contenu pour identifier tout les niveaux hiérarchiques.

Admettons que vous décidiez que les légendes des photos auront le corps le plus faible. La taille minimum légale pour afficher des Conditions Générales de Vente oscille entre 7 et 8 points à l’impression. A l’écran, une taille de 9 pixels semble vraiment le minimum.

La différence principale qu’il y a entre l’imprimé et le web n’est pas tant le choix restreint des polices sur ce dernier que leur rendu qui peut varier radicalement selon la taille. L’exemple le plus flagrant concerne Verdana, disgracieux à 100% mais très classe à 85%. A contrario, Times New Roman n’est pas très lisible à 85% mais “rend” très bien à 100% et au-delà.

La conséquence sur votre design web, c’est que vous ne pourrez pas jouer subtilement sur le corps et la graisse des caractères : si à l’impression toute la gamme des tailles est rendue parfaitement (quoique l’encre peut boucher les corps les plus faibles), certaines polices ne seront pas bien dessinées selon la résolution de l’écran ou les effets comme Cleartype qui peuvent être activés ou non.

Petit mais costaud

Si nous prenons 9 pixels comme taille minimum, les suites peuvent nous nous aider à déterminer les tailles des différents niveaux de titre?

En utilisant 1,41 comme coefficient multiplicateur (racine-carré de 2) :

• H6 — 9 pixels • H5 — 13 pixels • H4 — 18 pixels • H3 — 25 pixels • • H2 — 35 pixels • H1 — 49 pixels

A noter que nous ne sommes pas obligé de distinguer les différents niveaux de titres par des tailles différentes, et que dans de nombreux cas, un changement de couleur ou de contraste peut s’avérer plus judicieux. D’autant plus que pour les moteurs de recherche la taille n’est pas un critère discriminant ;)

Par ailleurs, tous les niveaux de titre ne sont pas systématiquement utilisés, ce qui peut permettre de réduire l’écart entre h6 et h1.

Déterminer la largeur des colonnes

Première méthode : Pour déterminer la largeur des colonnes de texte, c’est encore plus simple : une fois que la taille des textes est définit, il suffit de compter le nombre de mot que les colonnes devront accueillir, sachant que 15 mots par ligne est parfait pour la lecture.

Ainsi, en fonction de la taille du texte et du nombre de caractères par ligne, nous avons une largeur de colonne qui peut servir de base pour induire les autres valeurs par le jeu du coefficient multiplicateur du nombre d’or ou de tout autre ratio.

Notez toutefois qu’une ligne de 15 mots à 9px n’est pas vraiment d’une lecture aisée, et qu’il sera sans doute nécessaire de diviser par 2 le nombre de mots. Dans ce cas, pensez aussi à dimininuer l’interlignage pour conserver un gris typographique harmonieux.

Deuxième méthode : On peut également partir d’une largeur de colonne en s’inspirant des chiffres vus plus haut pour les niveaux de titre. Si on les multiplie par 10, on obtient les valeurs suivantes : 90, 130, 180, 250, 350 et 490 que l’on peut utiliser comme suit :

• Colonne principale : 490 pixels, • Barre latérale 250 pixels, • Gouttière : 20 pixels. • Largeur totale : 760 pixels.

On peut en profiter pour ajouter un header et un footer :

• Header : 760 x 90, • Footer : 760 x 30 (multiple de 90).

Exemple de design bâti sur la racine-carré de 2

Pour conclure

L’application d’une suite mathématique ou d’un ratio pour contruire une grille de mise en page est rarement mis en application sur le web autant en raison des contraintes imposées par la grille elle-même que par la nature dynamique d’un site web : difficile, par exemple, de prévoir des images pour rythmer la mise en page des articles d’un site, si le client a la liberté — via le CMS — de ne pas les mettre. Il faut donc anticiper la présence ou l’absence d’image.

Une des contraintes fortes qui limitent l’application d’une grille sur le web, c’est le fait que contrairement à l’imprimé qui possède toujours une hauteur, le site web, lui n’en n’a cure : chaque page peut avoir une hauteur différente. Il faudra donc veiller à ce que la grille de mise en page s’exprime par palier pour être visible tout au long du défilement de la page et pas seulement dans le haut de la page.

Toutefois, les bénéfices apportées par les tracés régulateurs en terme d’harmonie et d’équilibre tout au long de la navigation, font pencher largement la balance en leur faveur. Une fois mise en place, la grille impose son rythme pour le moindre élément, ce qui évite de se poser des questions existentielles sur la taille d’un champs texte ou sur l’emplacement d’une nouvelle rubrique.

Bibliographie

Il s’agit surtout de livres assez anciens. Si vous avez des références plus actuelles n’hésitez pas à en faire profiter tout le monde dans les commentaires ;)

• Maquette et mise en page — Pierre Duplan et Roger Jauneau — Editions du Moniteur, 1992 (ISBN 2 281 31051 5),

• Typographie — Emil Ruder — A. Niggli Ltd, 1988 (ISBN : 3 7212 0043 8), • Le secrétariat de rédaction — Louis Guéry — Editions du CFPJ, 1990 (ISBN 2 85900

045 3), • Typographie, du plomb au numérique — Jean-Luc Dusong et Fabienne Siegwart —

Dessain et Tolra, 1996 (ISBN 2 04 021744 4), • Grids, the structure of graphic design — André Jute — Rotovision, 1996 (ISBN 2

88046 277 0), • Tous les numéros d’Etapes Graphiques …








• Quelques notes sur la conception d’une charte graphique (12) • Frameworks CSS + Reset CSS : design from scratch (16) • Créer le logo et la charte graphique de mon nouveau blog en 4 étapes (17) • 5 règles simples pour gérer l’affichage de votre texte dans vos mises en page (22) • Vos positions s’affaissent ? Mettez le bottom à zéro… (3)







@Alexandre : lol ;)


















Gabriel










Il y a bien des chapitres très intéressants sur le balisage d’un document, etc. sur la sémantique des balises, sur les grilles, mais en revanche, j’ai trouvé les techniques de “prototypage” un peu “foutage de gueule” : je cherchais, moi, des techniques pour faire des vrais sites et pas des maquettes à présenter au client !




























@artxtra > je l’évoque rapidement dans l’article, mais effectivement, une des raison du faible emploi des grilles basées sur le nombre d’or ou la suite de fibonacci provient essentiellement du nombre d’info à maquetter. Dans le print, ces grilles sont plutôt réservés à des ouvrages sur les arts ou les collections haut de gamme.


















@Nicolas > l’exemple de la typo que j’ai donné sert surtout d’illustration, mais on pourrait tout aussi prendre la largeur d’un visuel, ou même pourquoi pas la largeur d’un encart publicitaire pour bâtir une mise en page harmonieuse… Ou, encore la largeur d’un widget indispensable qui pourra ainsi être mis en valeur.













S’il n’y a certes pas “trace” direct du nombre d’or dans l’homme de Vitruve, Leonard de Vinci a néanmoins réalisé ce croquis selon ce qu’il a pu observé dans la Nature. Et il n’est point besoin d’aller chercher très loin pour remarquer que ce chiffre/ce rapport est très présent. Si tu regardes bien les tableaux de De Vinci, tu remarqueras que la composition des tableaux tient souvent compte du rectangle d’or. Ce n’est pas pour rien que ses tableaux dégagent une telle harmonie. Je dirai surtout qu’il suffit de faire des tests. Prends deux photos d’un personnage. D’un côté tu le cadres au milieu comme tout un chacun serait tenté de faire. Et prends en une seconde mais en plaçant le personnage un peu en bas à droite (plus ou moins le rectangle ABCD de la spirale

d’or), eh bien tu remarqueras que la photo est bien plus “impactante” dans le second cas. Sa lecture sera bien plus confortable.












Cela dit, ça peut être pris également comme une source de créativité, si on les utilise à bon escient. Par exemple, dans cet article de Mark Boulton, bien qu’on soit en print, on peut utiliser le nombre d’or ou tout autre “division” pour réaliser un système de

grille. On divise et redivise pour arriver sur une grille au design particulier à partir duquel on peut s’exprimer.












Bonjour à tous,


Merci,

BB.







4 Trackbacks




[...] La première, c’est que je vais héberger mon blog chez un hébergeur classique (pour le moment il est chez wordpress) avec mon propre nom de domaine. Je pourrais ainsi personnaliser plus facilement mon blog. Et justement pour ce qui est de la personnalisation je me suis lancé dans la création d’un thème pour wordpress. Quoi?? Un thème pour wordpress?? Vivi! Mais je ne fonce pas tête baissée! Je suis en train de suivre les tutoriels de Fran6 et br1o pour voir comment fonctionne le moteur de templates de WP (wordpress). Ensuite place au design : croquis, photoshop, découpe, intégration, CSS. Puis transfert des billets, commentaires, etc etc. Pour le design je vais également suivre les excellents conseils de Br1o. [...]






Documents

Nombre d’or, suite de Fibonacci et autres grilles de ...vigraphism.free.fr/process/dlweb/boite/nbre_or.pdf · Conception de site web, Design & Graphisme Nombre d’or, suite de