Il s'agit de cours autour des feuilles de style CSS ayant pour but de présenter tous les aspects ou presque que peut prendre une liste déroulante. Si vous êtes en manque d'inspiration ou simplement que vous voulez découvrir de nouvelles techniques, allez immédiatement sur ce site qui est extrêmement complet. Chacune des techniques sont très bien détaillées, le code source de la page HTML et de la feuilles de style CSS sont evidemment fournit, ce qui vous permettra de les appliquer simplement sur vos sites Internet.

Je vous recommande de débuter par cette section.

On en revient néanmoins à un problème, simple, plus ces techniques de graphistes sont démocratisées, plus elles deviennent banalisées et donc moins utilisées par les graphistes qui recherchent l'originalité et la nouveauté. Un article du blog elyste donne quelques styles à éviter car ils deviennent trop utilisés.

On trouve de plus en plus d'interfaces graphiques sur le Web, dites extrêmement réalistes puisque directement issues de photos réelles. Le thème de ce billet n'est pas lié au réalisme mais plutôt à l'usage des textures de papier dans un site Internet. Ces textures pourront être réalistes, sorties tout droit d'une photo, ou bien graphiques, donc inventés de toute pièce... Tout au long de ce billet je vais vous présenter quelques sites utilisant un aspect papier d'un style tranditionnel jusqu'au moderne.

http://www.cafelisa.com/

Le style du papier ainsi que le choix de la couleur de la typo rappelle un parchemin où l'on aurait écrit à la plume. Ce design donne un caractère très intimiste au site, on retrouve un peu la sensation d'un vieux livre où l'on tourne les pages rugueuses et dont la bordure est irrégulière. Cet usage du papier dans un site est assez traditionnelle à mon goût mais il est toujours d'un très bel effet.

http://jeuxdemaux.com/

Un blog trouvé récemment, le style rappelle un cahier posé sur un bureau quelques objets disposés ici et là, tel une carte d'identité, une gomme, un post-it qui traine. Le journal très soigné où l'on trouve quelques dessins scotché et quelques fleurs sêchées. Un style plus moderne, mais toujours aussi intimiste. Cet usage du papier sont relativement traditionnel.

http://www.certovka.info/cz/

Le site d'un restaurant Tcheque (je crois), on y trouve deux aspects papier, d'une part la photo de biais sur le coin haut droit de l'interface, cette technique est de plus en plus utilisée et l'on peut dire que c'est très efficace, d'autre part juste en dessous on trouve une carte à l'aspect très authentique d'une pub pour un concert de Jazz par exemple, les bords sont rognés comme si elle avait été conservée jusque là.

http://www.headstrong.co.nz/

Le côté travaillé du plan de travail, comme s'il était fréquement utilisé, avec les marques d'une tasse de café sur un papier de bloc note jaune, voire même utilisé en ce moment même, avec cette cigarette laissé là, posée. Un crayon est laissé tombé sur le haut de la table, prêt à continuer l'écriture brouillon sur un bloc note brouillon :) Ambiance très sympa, ce n'est sans doute pas le site le plus beau au niveau compétence graphique que je vais vous présenter mais le concept le rend très original, notamment ce papier jaune comme l'on voit dans les films américains ;) Le problème de ce site est qu'il perds sa cohérence lorsqu'on agrandi la taille du texte, puisque la page du bloc note n'est en fait qu'une seule image... Il faut penser à découper le haut, le centre et le bas en trois images.

http://www.airios.com/blog/

Un simple morceau de ce très beau site, pour illustrer l'usage du papier qu'à un certain endroit d'un site. Un site n'est pas forcément graphiquement tout en papier, il peut être utilisé à bon escien qu'à quelques endroits. Le site reste tout de même à visionner avec un grand plaisir.

http://www.couchfort.net/

Un autre exemple de léger rappel au papier tel l'exemple présenté ci-dessus. On trouve des bords épais et légérement abîmé tel ceux du papier Canson :)

http://www.dirtbagstudio.co.uk/

Un effet interessant sur le haut de l'interface avec l'intégration d'une photo dans un effet papier classique où les bords sont rognés et le haut droit est corné. Très classique mais ça marche bien ;)

http://emericawildinthestreets.com/

Le menu en haut, tout en papier, avec un effet comme pour les petites annonces d'une languette que l'on peut détacher :) D'ailleurs déjà deux menus ont disparus ;)

http://www.skyphe.org/v8/

Un design très clair où l'on retrouve dans le coin haut gauche un effet de papier abîmé, on retrouve l'aspect d'un livre ouvert. L'originalité se trouve dans le fait que les pages sont floues et pas très réalistes. Cet aspect graphique est assez design. J'aime bien ;)

http://www.paumanokreview.com/

Le rappel du papier est assez faible sur cette interface bien qu'on le retrouve discrêtement sur le haut et le bas de la partie principale de l'interface. Un simple effet corné sur le haut gauche, et un effet abîmé sur le bas de la page donne un caractère agréable et harmonieux à cette interface.

http://www.oneplayer.co.uk/

Toute cette interface est autour du papier beaucoup plus sobre et moderne de ce que l'on a vu auparavant. Les éléments sont bien rangés même si le post-it est à moitié déchiré et la page principale légérement corné en haut à droite. A noter sur la partie "Gallery login" la très belle intégration d'un formulaire d'authentification.

http://www.monarchpro.com/

Ce site a été retenu uniquement pour l'aspect moderne d'une enveloppe que l'on trouve sur le haut de l'interface. Encore un exemple de site moderne où un simple aspect graphique subtil rappelle le lien avec le papier.

http://ilmol.com/blog/

Là encore un usage du papier assez moderne et assez graphique pour un blog amusant. On sent que les éléments ne sont pas réalistes mais le rappel au papier corresponds au blog.

Mes sources

(Je rajoute cette section suite au message de PiTiLeZarD)
La galerie de CSS Vault
La galerie de unmatched style
La galerie de CSS Reboot
Un très rapide passage sur CSS Beauty, c'est beaucoup plus difficile de trouver ce que l'on souhaite
Je crois que c'est tout... ;)

Je ne suis pas un coloriste spécialiste, loin de là, je vais donc vous redirriger vers les liens qui m'ont permis de mieux m'en sortir dans le choix des couleurs. Car il faut le dire on ne peut pas faire n'importe quoi avec une palette de couleurs. Quelques règles sont à connaître et à respecter.

La base : la terminologie des couleurs
Quelques exemples de choix d'une palette de couleur
(cf. interface.free.fr)

Le site suivant est une mine d'or pour le choix des couleurs, en effet vous trouverez des compositions de couleurs classées par accords, style d'accord, etc. Vous souhaitez utiliser trois couleurs pour votre site avec une dominance particulière allez voir Chromoweb, il vous trouverez certainement une bonne solution ;)
Chromoweb

Un site trouvé un peu par hasard, mais très interessant, il référence les plus belles couleurs et les plus belles compositions de couleurs choisies par les internautes, inutile de dire que si vous ne voulez pas prendre de risque (sans chercher l'originalité), faites un tour là bas :)
ColourLovers

Vous cherchez une couleur pour un bureau, une plume, de l'encre ou je ne sais quoi, voici :
http://pourpre.com/chroma/
Je le connais depuis très peu, mais il peut vite devenir indispensable. Je n'ai pas eu le temps de naviguer parmis leur base de couleurs.

Voila quelques liens à bookmarker pour mieux réussir ses choix dans la réalisation d'un site Web.
Si vous en connaissez d'autres ou simplement pour laisser une technique, n'hésitez pas à laisser un commentaire.