Dans la même rubrique...

lundi 22 février 2010— Dernier ajout mardi 23 février 2010

Bien composer ses écrans

Lorsque l’on conçoit pour un écran, comme la page d’un site web par exemple, on se pose toujours la question de la taille de l’écran.

La taille de l’écran de nos internautes fait parti des inconnues avec lesquelles nous devons composer.

La conception d’écran n’est pas simple. S’il l’on prend un écran de 1024 par 768 pixels, on peut se baser sur une taille utile de 960 pixels de large.

Pourquoi 960 ?

960 a l’avantage d’être un chiffre un peu magique. En effet 960 est divisible par 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 et 480. Ce qui en fait un chiffre particulièrement intéressant.

Dans l’exemple ci-dessous, on peut voir les combinaisons possible sur une grille de 960 divisé par 12.

grilles 960

Observez aussi les sites web grâce à un plugin de firefox.

Gridfox

Ce plugin vous permet d’analyser les sites comme celui ci qui est bien calé sur une grille de 12 colonnes.

site normal site avec la grille du plugin

Des grilles de concevoir vos écrans

Pour créer vos écrans, voici des grilles pour photoshop, illustrator et fireworks.

Zip - 273.6 ko
grilles 960

Il y a beaucoup de générateurs de code Web utiles et des générateurs graphiques, mais saviez-vous qu’il existe également des générateurs de mise en page CSS aussi ?

Voici des générateurs de grille de mise en page CSS. Ces outils vous aideront à créer et visualiser les différentes mises en page Web et à concevoir et de dessiner les grilles de diverses façons pour vous aider dans votre processus de conception.

Pagecolumn

Grid Layout Generator by Pagecolumn

netProtozo

Grid Generator by netProtozo

Visitez aussi les liens suivants.

http://www.webdesignbooth.com

http://www.gridsystemgenerator.com/

http://developer.yahoo.com/yui/grids/

http://code.google.com/p/the-golden...

on va encore plus loin en proposant les CSS.

http://www.designinfluences.com/flu...

Documents à télécharger