Quelques pistes pour un design 2.0

Publié le par PêUR

Je ne suis pas fan de la terminologie web 2.0, mais bon, à force ça devient un terme banal et de plus en plus courant sur le web, si bien qu'il commence à entrer dans mon vocabulaire.

Il vrai que j'aurais pu dire à la place de "2.0", "moderne" mais ça fait un peu quiche... En plus, j'ai des chances d'avoir des visiteurs supplémentaires en provenance de google surtout ci je dis AJAX! :)

Vous trouverez ci-desous des pistes pour obtenir un design 2.0 ainsi que les liens vers les articles, tutoriaux et sites qui m'ont éclairés.

 

1 / Une disposition centrale

Les sites/blogs 2.0 sont centrés

exemple site centré

exemple site centré

 

2 / Pas plus de 3 colonnes

De toute manière comme les blogs/sites sont centrés il y a moins de place qu'avec un design «élastique»

exemple peu de colonne

Une tendance qui émerge: 1 seule colonne!

exemple 1 colonne

exemple 1 colonne

 

3 / Une séparation entête et corps du site/blog bien marquée

exemple entete marquée

exemple entete marquée

exemple entete marquée

 

4 / Un menu simplifié

Préférez l'utilisation de mots courts pour chaque lien de votre menu. Evitez les menus déroulants. Le menu doit être très visible et clairement identifiable.

exemple menu

exemple menu

exemple menu

exemple menu

exemple menu

exemple menu

exemple menu

 

5 / Des liens clairs et différenciés

Les liens internes et externes doivent clairement se distinguer du contenu non-naviguable.

Pour cela utilisez de forts contrastes. Le background colorés en inverse vidéo au passage de la souris et très à la mode.

quelques exemples:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dolor. Etiam fermentum sapien id massa. Suspendisse ornare sem vel eros. Praesent id elit. Duis sollicitudin sem nec nulla. Etiam cursus. Donec rhoncus. Aenean fermentum ipsum eget dolor semper molestie. Praesent id elit. Proin a dolor.

 

6 / Une grande taille de police

La taille des polices grandit à vue d'oeil! A croire que les internautes 2.0 ont des problèmes de vue... Resteraient-ils trop longtemps devant leur écran?

exemple taille police

exemple taille police

exemple taille police

exemple taille police

 

7 / Des listes en surbrillance

exemple liste brillante

exemple liste brillante

La future version de votre serviteur:

exemple liste brillante

 

8 / Des surfaces structurées

Ombres

exemple ombres

exemple ombres

exemple ombres

Dégradés

exemple dégradé

exemple site centré

Reflexions

Elles permettent plusieurs effets: goutte d'eau, badge, plastique brillant, reflexion sur une surface plane...

exemple reflexion

exemple reflexion

exemple reflexion

exemple reflexion

Stries

exemple ombres

exemple ombres

exemple ombres

 

9 / Un énormes pied de page

exemple énorme pied de page

exemple liste brillante

exemple liste brillante

 

 

10 / Une étiquette en forme d'étoile

Bon OK ça tend à disparaître mais bon...

exemple liste brillante

exemple liste brillante

 

11 / Les couleurs du web 2.0

Honteusement pompé sur Modern Life is rubbish

 
[#EEEEEE] - Argent
 
[#FFFFFF] - Blanc
 
[#F9F7ED] - Blanc Magnolia
 
[#FFFF88] - Jaune «action effectuée»
 
[#CDEB8B] - Vert Qoop
 
[#C3D9FF] - Bleu Gmail
 
[#36393D] - Gris ombre
 
[#FF1A00] - Rouge Mozilla
 
[#CC0000] - Rouge Rollyo
 
[#FF7400] - Orange RSS
 
[#008C00] - Vert Techcrunch
 
[#006E2E] - Vert Newsvine
 
[#4096EE] - Bleu Flock
 
[#FF0084] - Rose Flickr
 
[#B02B2C] - Rouge Ruby on rails
 
[#D15600] - Orange Etsy
 
[#C79810] - Doré 43 things
 
[#6BBA70] - Vert Basecamp
 
[#3F4C6B] - Bleu Mozilla
 
[#356AA0] - Bleu Digg
 
[#D01F3C] - Rouge Last.fm

 

Quelques ressources

Publié dans CSS

Commenter cet article

Domi 31/10/2007 15:30

Excellent.
Pour ma part je ne sais pas si j'apprécie ce genre de design parcequ'il est dans l'air du temps ou parcequ'il s'impose à nous de plus en plus ...

Mathieu 09/10/2007 07:53

Bonjour , quel magnifique article, superbement intégré a la suite des references sur les istes anglais. Une question me trotte adns al tete comment utiliser des polices non strandard en css?

xk_liber 10/05/2007 10:29

Un bien bel et intéressant article.
Merci ! :)

PêUR 10/05/2007 12:47

:)

daria 06/05/2007 08:43

Superbe billet : merci :)

PêUR 06/05/2007 14:25

:)

franck 20/04/2007 17:09

Tres sympa !

Et question peut-être hors sujet : j'adore ton "retour en haut de page défilant" comment fait-on? il y a quelquechose de plus subtile qu'un simple "#" non ?

Merci en tout cas.

PêUR 20/04/2007 23:32

C'est l'effet ScrollTo décrit dans cet article: Scriptaculous: Utilisation des effets