contour haut

Tutoriel

Divine proportion et site internet

14 décembre 2009

Pour la réa­li­sa­tion de ce site inter­net, et pour mon blog per­son­nel, j’ai sou­haité uti­li­ser un gra­phisme basé sur la divine pro­por­tion. En effet je vou­drais offrir aux visi­teurs un sen­ti­ment d’har­mo­nie et d’équilibre, dans un site sobre et essen­tiel. Ce sera bien sûr au visi­teur même de juger de la réus­site ou de l’échec.
Je pré­sente dans cette page la métho­do­lo­gie uti­li­sée, avec les indi­ca­tions uti­les pour ceux qui vou­draient s’en ins­pi­rer pour leurs pro­pres réa­li­sa­tions.

Le « nom­bre d’or », ou « divine pro­por­tion » est connu depuis l’anti­quité et est sou­vent uti­lisé en pein­ture et en archi­tec­ture pour har­mo­ni­ser les for­mes géométri­ques.
Depuis des siècles beau­coup a été dit et écrit à son pro­pos, et en web­de­sign il est par­fois uti­lisé pour dimen­sion­ner conve­na­ble­ment les différents éléments d’une page web ( voir mon billet précédent pour la présen­ta­tion de la « divine pro­por­tion » ).
Cependant dans la mise oeu­vre d’un site inter­net, l’uti­li­sa­tion du nom­bre d’or pour la cons­truc­tion d’une grille de référence m’est rapi­de­ment appa­rue contrai­gnante et limi­ta­tive, ceci par rap­port à d’autres tech­ni­ques comme celle de la règle des tiers ou celle de la grille à 12 colon­nes.
Ce sont les tra­vaux d’une agence japo­naise de design ( « infor­ma­tion archi­tect »), qui dans le passé avait pro­posé un tem­plate Wordpress entièrement basé sur la divine pro­por­tion, qui m’ont suggérer une méthode pour cons­truire des grilles plus com­plexes que celle basées sim­ple­ment sur le rap­port 1.62.
Pour cela l’élément de base est une spi­rale cons­truite sur la divine pro­por­tion : une « spi­rale d’or » ou « spi­rale de fibo­nacci » ( voir ici ).
Le posi­tion­ne­ment sur la page de deux spi­ra­les ayant la même taille per­met de définir des grilles qui gar­dent une bonne har­mo­nie et lais­sent une liberté de posi­tion­ne­ment impor­tante. On peut éven­tuel­le­ment réuti­li­ser la même tech­ni­que à l’intérieur d’encadrés plus petits.
Voilà par exem­ple l’uti­li­sa­tion de deux spi­ra­les, et la grille cor­res­pon­dante, pour les pages du blog.
Deux « spi­ra­les de fibo­nacci » pour la défini­tion d’une grille de posi­tion­ne­ment, et une page du blog cons­truite sur cette grille.
 
 
 
Pour la cons­truc­tion de la grille j’uti­lise un logi­ciel de des­sin vec­to­riel ( Inskscape, inks­cape.org). La « spi­rale de fibo­nacci » peut être fabriquée faci­le­ment, on peut ausi la trou­ver déjà prête au for­mat vec­to­riel, et être importée dans inks­cape. Par exem­ple ici ).
Une fois des­siné la grille dans Inkscape, expor­ter l’image au for­mat JPG ou PNG à la bonne dimen­sion (990 px de lar­geur par exem­ple pour mon site). Cette image, uti­lisée comme image de fond pen­dant la phase de dévelop­pe­ment, per­met de pla­cer aux bons endroits les éléments gra­phi­ques du site.
 
La grille pour les pages pro­fes­sion­nel­les du site a été cons­truite avec les mêmes spi­ra­les, placées de façon différente.
 
 

Technique

 

 

Poster un message

 

 

FBServices - Internet professionnel - création sites, référencement, e-commerce
Vous êtes ici : Accueil  /  Le blog de Fabio Bertagnin  /  Billet du 14 décembre 2009
>>
contour haut