Background CSS : des fonds hachurés avec la "positive attitude"

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Background CSS : des fonds hachurés avec la "positive attitude"

Motif zébré répétitifLes fonds de page web hachurés sont particulièrement appréciés des webdesigners pour une raison double : les zébrures donnent de la vibes aux pages web tout en conservant un ratio poids/agrément des plus satisfaisant, vu qu’il s’agit d’un motif de petite taille (généralement quelques pixels) qui se répète sur tout ou partie de la page.

De la graphologie appliquée à la zébritude

Toutefois, cet angle peut avoir deux directions qui peuvent en dire long sur votre humeur si l’on met en rapport le sens des zébras avec certaines conclusions issues de la graphologie. Cette dernière nous indique qu’une écriture penchée vers la droite est synonyme de dynamisme et de regard tourné vers l’avenir ; vers la gauche, on se tourne vers le passé et l’introspection.

Voici un exemple qui présente des hachures dirigées vers la droite. (capturé sur jarodxxx)

Fond hachuré tourné vers l’avenir

Le même exemple avec les zébrures dirigées dans l’autre sens

Fond hachuré tourné vers le passé

Les fonds zébrés obéissent-ils à cette dichotomie ? Je n’ai pas de certitude. En revanche, ce que je sais, c’est que les fonds hachurés qui donnent sur la gauche peuvent contrarier le sens de lecture d’une page occidentale qui – comme chacun sait – s’effectue de la gauche vers la droite.

Les exemples présentés ici semblent relativement similaires au regard du sens de lecture, et ce pour plusieurs raisons :

  1. La taille de la capture d’écran privilégie la surface de texte et minimise l’impact des hachures,
  2. Les hachures n’apparaissent que sur le côté gauche,
  3. Les hachures sont relativement peu contrastées dans cet exemple.

Et vous, vos fonds zébrés penchent vers la droite ou vers la gauche ?

Sélection de sites permettant de générer des motifs répétés en quelques clics

http://www.kianhean.com/archives/101
Le fond de la page change grâce à un petit javascript qui détecte l’heure et affiche la feuille de style avec le background approprié
http://inner.geek.nz/javascript/parallax/
Etonnant effet où le texte défile à la vitesse normale, tandis qu’une partie du fond défile plus lentement et une autre plus rapidement. Le scroll fonctionne avec la molette, les flèches du clavier, les touches « haut » et « bas » de page et avec la barre d’espace.
http://scriptasylum.com/background/alien/alien.html
Le meilleur pour la fin : allez, je vous laisse découvrir ;)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



12 commentaires pour “Background CSS : des fonds hachurés avec la "positive attitude"”

  1. burningHat dit :

    Yop l’histoire du sens de l’écriture manuscrite m’a toujours beaucoup fait sourire (surtout qu’elle dépend aussi du fait qu’on soit droitier ou non)…

    Pour les fonds zébrés, je pense que le fait d’aller dans le sens contraire peut parfois permettre de détacher le contenu du fond ce qui, manier avec précaution et talent, peut un confort visuel très plaisant. Alors que dans le sens de lecture, on est dans une convention tellement attendu qu’on aura plus de mal à surprendre parfois.

    Mais finalement, ça dépend beaucoup plus du design et de l’équilibre du tout et je pense surtout qu’il n’y a pas de règle gravée dans le marbre (ou alors s’il y en a c’est pour mieux être contourné)

    Aucune préférence en la matière ceci dit… Et oui, ça reste un élément très apprécié et souvent appréciable dans le design d’un site web. Un peu lassant à force peut-être mais j’aime toujours bien en général :p

  2. jarodxxx dit :

    Waouw , flatté de servire d’exemple !

    Aller je copie ton article sur mon blog ! et je decouvre le tien en meme temps ! Je viens de m’abonner :D

  3. Bruno Bichet dit :

    @burningHat > Effectivement, ça dépend beaucoup de l’équilibre général et des zébrures qui « portent » à gauche ne sont pas forcément malvenues. Néanmoins, j’ai souvent remarqué que j’avais une gêne à la lecture de certains blogs et je me suis rendu compte que ça venait en partie de cette direction des hachures qui ont tendance à disperser le regard.

    Cecit dit, je ne doute pas qu’il y ait une grande part de subjectivité là-dedans ;)

    @jarodxxx > à mon tour d’être flatté d’être cité sur ton blog, merci pour les liens :-)

  4. Zeb dit :

    Bon article, merci pour le partage des liens ;)

  5. arkham dit :

    Un article très utile, je ne connaissais absolument pas la théorie sur le sens des rayures. Je les penche toujours vers la droite ca doit être mon côté dynamique ^^

    Sinon +1 pour ventdaval que j’utilise depuis des années, un régal :)

  6. [...] fonds de page hachurés. Alors j’ai fais quelques recherches et je suis tombé sur le site de css4design. Je le remercie énormément parce qu’il a recensé des sites en ligne permettant de [...]

  7. Thoams dit :

    Bonjour Bruno,

    Le lien « http://www.kianhean.com/archives/101″ est cassé. Je n’ai pas trouvé le bon lien, car il n’y a plus rien dans la section archive de site en question !??

    Bonne continuation, Thoams ;-)

  8. [...] 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” [...]

  9. AlainD dit :

    Je suis un peu surpris sur la définition donnée pour les rayures qui « penchent vers la droite ou la gauche » selon votre interprétation. Le sens de lecture que nous avons en commun est bien de la gauche vers la droite. Hors sur votre exemple, des rayures n’ont ni début ni fin que l’on peut clairement distinguer. Pas de tête, pas de queue… On ne peut donc définir si ça « penche sur la gauche ou la droite », mais plutôt « ça monte ou descend »… non ? Exemple avec une ligne de texte, on peut la faire monter ou descendre pour simuler les rayures, si on la fait descendre il n’y aura pas forcement d’effet de miroir… non ? Bonnes réflexions ;)

  10. [...] m’étais déjà posé ce genre de questions sur le sens des hâchures qui ont fait la joie des backgrounds des sites Web dans le mouv’ dans les années 2006 [...]

  11. [...] Les fonds hachurés ont eu leur heure de gloire dans les années 2005 — 2006 mais ils n’ont pas totalement disparus. Comme les dégradés, ils permettent d’utiliser une couleur de fond tout en restant léger. Il peuvent être orientés de plusieurs manières et présenter des tailles de zébrures variables. (cf. Des fonds hachurés avec la positive attitude). [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site