Relooking extrême du blog

Si vous n’avez rien vu, voici ce qui a été modifié :

  • Les titres des billets : passés en Police de caractères Georgia et en tout majuscules, ils me plaisent plus comme ça et je les trouve plus clairement identifiables.
  • Le formulaire de commentaires : exit les fonds striés estampillés web2.0 que je n’ai jamais aimé pour un formulaire plus sobre et que je pense plus lisible.
  • Les rétroliens : ils passent tout en bas de la page d’articles, de façon à mieux mettre en avant les commentaires que je trouve personnellement plus importants.
  • Les citations : ça, ça fait déjà quelques temps que je les ai modifiées, maintenant je les trouve visibles et à mon goût.
  • Le corps des articles : Ca va faire plaisir à Florent.V, j’ai uniformisé les marges des titres et des paragraphes pour éviter l’effet d’escalier.
  • Le pied de page : Retouche des listes de billets, travail sur le nuage de tags pour le rendre plus exploitable (et il y a encore du travail).
  • Formulaires multiples et divers (contact, envoyer à un ami…) : début d’uniformisation avec le formulaire de commentaires.
  • Les liens : retrait de la couleur bleu, vieux reliquat d’un ancien thème, le temps de trouver une solution qui me convienne.
  • Flux RSS : Ajout par défaut de la catégorie dans le titre du billet ainsi que quelques informations complémentaires, mais je vais revenir dessus dans un futur billet.

C’est tout pour le moment, mais c’est déjà pas mal.

Donc, comme toujours, si vous avez des critiques, des conseils, etc. Quand on est le nez dans un design, on ne se rend pas toujours compte des détails gênants ou améliorations possibles qui peuvent servir à l’utilisateur final.

Qu’est ce que la "surstructuration" en mise en page ?

La nature a horreur du vide, le « metteur en page » amateur également.

Un des travers classiques que l’on peut rencontrer dans les mises en page (web ou print) de personnes dont ce n’est pas le métier, c’est un besoin de structurer leur document à l’extrême.

Cela vient d’une peur bien légitime de ne pas être « lisible » lorsque le document contient une certaine masse d’informations.

L’avatar le plus commun de cette mauvaise habitude est un usage intensif de filets ou de bordures pour délimiter les zones d’information. Et quand je dis filet, je devrais dire parfois gros filets.

En utilisant un(e) filet/bordure, on donne virtuellement (et littéralement) un cadre à son information, car c’est un balisage visible, cela nous rassure, mon information a une force que je vois à l’écran et elle ne se mélange pas avec le cadre de l’information suivante.

Pour être vraiment certain, ces filets sont souvent couplés avec des fond de couleur qui contrastent fortement (et souvent trop) avec le reste du design.

Avec le temps, on apprends qu’un simple fond léger, un repère graphique, un filet unique ( en haut, a droite, en bas, à gauche) suffisent à mettre en avant une information, on arrive à se libérer de ce besoin de structure, à ne plus avoir horreur du vide.

Ps : petite dédicace à l’artichaut Rennais.

Quelques notions de mise en page : images et couleurs

Aujourd’hui ce sera :

S’inspirer d’une image ou d’un visuel pour choisir les couleurs de son design

Parce que franchement, je me rend compte, en relisant le précédent article, que j’ai donné des informations, pourtant importantes, mais sans réelles explications.

Et cette phrase ci :

Si vous avez un visuel fort qui habille votre site, image, illustration, ou simplement votre logo, utilisez ses couleurs pour habiller votre site, uniquement pour une question d’uniformité graphique.

Mérite tout de même que l’on étoffe un peu la réflexion.

Pour changer, ou plutôt pour illustrer l’idée, nous allons travailler à partir d’exemples.

premier exemple le site oyoyo.fr

Oui je sais, j’en ai déjà parlé plusieurs fois, mais il rentre totalement dans la démonstration, donc…

C’est même plus insidieux que ça, car je me suis rendu compte avec le recul que la chose avait été inconsciente, je me suis laissé « guider » (pour ne pas dire diriger) par le visuel qui avait été choisi initialement pour être le visuel « fort » de la communication de la boutique OYOYO, le bébé dragon.

Voici le fameux bébé dragon :

Un mignon petit bébé dragon tenant un biberon

Et voici une capture du site OYOYO au naturel (il est actuellement en version noël) :

capture d'écran du site internet oyoyo.fr

Vous ne remarquez rien? Bon avouons que ce n’est pas SI évident que ça, surtout que la capture oyoyo est quand même de mauvaise qualité.

Il y a deux bleus sur le site oyoyo, un bleu très clair que vous allez retrouver au niveau de l’oeil, et un bleu plus foncé, plus profond qui est le bleu « basique » du dragon.

Ensuite, l’orangé « or » utilisé comme couleur contraste, que l’on retrouve au niveau de la tétine du biberon.

Le gris structurant, ailes, griffes, cornes, ventre et queue du dragon.

Et pour finir, le rouge, qui a été « adouci » sur l’image du dragon, que l’on retrouve au niveau de sa bouche, mais également en petites touches un peu partout sur le corps sous forme de violet (bleu + rouge). Sur le site on retrouve le rouge uniquement en survolant les liens ou pour quelques informations. On aurait pu s’en passer et uniquement se focaliser sur les trois couleurs principales : le bleu, le gris et le orange.

deuxième exemple : le thème dotclear « Hibou » de Kozlika

Une petite capture pour commencer :

capture du thème dotclear hibou par Kozlika

Ensuite, allez faire un tour sur le blog (http://www.kozlika.org/kozeries) et regardez les couleurs utilisées, leurs variations au niveau de certains blocs d’information (commentaires, rétroliens, etc…), et revenez, enfin essayez, parce qu’on peut rester scotché longtemps sur son blog.

Outre le fait que ce thème est une parfaite illustration de l’optimisation du gris typographique et des blancs (voir : Quelques notions de mise en page : Les bases, du texte et des blancs), il est aussi très intéressant pour notre sujet du jour, car l’ensemble des couleurs utilisées dans ce thème sont tirées du visuel utilisé en haut (le petit carré de fleurs).

Vous me direz, oui mais il n’y a que deux couleurs, le vert et le orange, et vous aurez partiellement raison. Nous n’avons pas besoin ici de couleur d’appoint structurante, il n’y a pas de colonnes d’informations, toute la structure principale se créée par le contraste entre le blanc central et les couleurs de fond.

Au passage, pour le fond, Kozlika a utilisé des couleurs qui « frottent », c’est à dire des couleurs dont la force visuelle est égale, l’équilibre est là, aucune couleur ne prend le pas sur l’autre, nous pourrions avoir un fond uni que l’effet serait le même (bon ce n’est pas totalement vrai, le orange est en fait légèrement plus sombre d’à peu près 10% je pense.).

Tout le site est réalisé en camaïeu de vert et de orange, il n’y a pas réellement besoin de couleur « contraste » complémentaire, le simple usage de variations de vert ou de orange suffit.

Pour finir

Pour habiller un site internet de façon élégante, vous n’avez pas forcément besoin de vous prendre la tête, une bonne technique et simple à mettre en oeuvre :

Trouvez un visuel qui convienne au thème ou à l’esprit de votre site et utilisez les couleurs que ce visuel contient. En général cela vous évitera des fautes de gout, hélas trop fréquentes.

Les articles de la série:

D’autres sont à venir.

Quelques notions de mise en page : Les couleurs et les contrastes

Préambule

J’ai eu, pendant mes études, un professeur de couleurs (et oui un cours à l’année uniquement pour parler des couleurs), un type formidable dont j’ai, hélas, oublié le nom, mais c’est ce que l’on peut appeler; Un Monsieur.

Pourtant, nous étions partis du mauvais pied, imaginez une classe d’une vingtaine de jeunes loups et louves, qui ont passé leur première année avec brio, qui pensent déjà tout savoir sur tout, et surtout qui ne comprennent pas l’intérêt de se taper un cours uniquement pour parler des couleurs.

Bref, imaginez ce vieux monsieur (en plus), qui arrive, nous toise avec un regard torve et nous sort direct : Bonjour je suis « Je me rappelle plus son nom », ces trois premiers mois, je vais les passer à nettoyer la merde que vous avez dans vos têtes, ensuite, et seulement ensuite, quand vous aurez appris à écouter et à apprendre, nous commencerons à travailler.

Trois mois plus tard, il était devenu notre dieu, vous vous en doutez.

Bref, revenons à nos moutons.

La couleur

La couleur, c’est un sujet passionnant, que l’on parle de synthèse additive (lumière), ou soustractive (matière), mais c’est surtout, pour revenir à notre sujet, un élément communiquant fort.

Si vous ne deviez retenir qu’une chose de la couleur, ce serait ceci :

Le Cercle chromatique :

Cercle Chromatique

Nous avons :

  • les couleurs primaires (cyan (bleu primaire, magenta (rouge primaire) et jaune : P
  • les couleurs secondaires : S
  • les couleurs tertiaires : T

Je ne vais pas m’étendre sur les couleurs complémentaires ni sur les théories des couleurs contraste, mais sachez qu’à partir de ce cercle chromatique, vous pouvez aisément tester n’importe quelle concordance de couleurs.

Deux autres variations de ce cercle chromatique :

Une version désaturée :

Cercle Chromatique désaturé

Une version « lavée » appelée le plus souvent « pastel » :

Cercle Chromatique pastel

Au passage, merci à je ne sais plus qui, ce cercle chromatique a été réalisé à partir d’un fichier flash vu je ne sais plus où mais si vous le reconnaissez, comme d’habitude je me ferais un plaisir d’insérer l’origine de la source dans ce billet.

Imaginez, le nombre de variations de couleurs possibles, elles sont quasiment infinies, mais vous verrez, vous reviendrez assez rapidement au cercle chromatique de base.

Ajoutez à cela les gris qui vont du « blanc » au « noir ».

On peut de façon très schématique les classer en trois catégories :

  • Les gris neutres : simples niveaux de gris du blanc au noir sans autre information de couleur
  • les gris chauds : des gris neutres contenant en plus des ajouts de jaune et de magenta (rouge primaire)
  • les gris froid : des gris neutres qui contiennent en plus des ajouts de cyan (bleu primaire) et de magenta (rouge primaire)

Je précise, si des fois des puristes passaient par là, je schématise totalement.

Les trois couleurs

Tout comme l’usage des polices , que l’on limite à trois différentes dans un même document, on va essayer de se limiter à trois couleurs principales lorsque l’on construit une mise en page.

Je dis bien trois couleurs principales, il peut y avoir des variantes de ces couleurs (plus pastel, plus sombre, moins saturées…).

La couleur Symbole

La principale, celle qui va identifier le la chromie du site, ce n’est pas forcément celle qui remplit le plus de surface mais plutôt celle que l’on voit le plus.

Je parlais eu début de l’article des « messages » véhiculés par les couleurs, savez vous pourquoi, par exemple, le bleu est utilisé dans tout ce qui touche au conseil, à la formation, et plus généralement aux sites de business?

Parce que le bleu est ce que l’on appelle une couleur concentrique (Moi vers Lui) et donc assimilée à l’information. Raccourci : ce message est bleu, il est informatif.

Je ne vais pas m’étendre sur la symbolique des couleurs, de nombreux sites en parlent, je vous conseille au passage l’excellent pourpre.com.

La couleur d’appoint

En général c’est celle qui va être utilisée pour des aplats, pour délimiter des zones d’information, parfois même sous simple forme d’ombrés ou de cadres.

Cette « couleur » est souvent une variante de gris, neutre, chaud ou froid, à voir pour offrir un minimum de contraste avec votre couleur symbole :

  • Si votre couleur « symbole » est « chaude » préférez un gris froid ou neutre
  • Si votre couleur « symbole » est « froide » préférez un gris chaud ou neutre

Dernier point, si vous utilisez des ombrés pour vos blocs d’information, essayez si possible d’appliquer la même chose :

  • Si votre objet ombré utilise une couleur chaude utilisez un ombré en gris froid
  • Si votre objet ombré utilise une couleur froide utilisez un ombré en gris chaud

La couleur contraste

C’est la couleur qui va souligner les informations importantes, celle qui va « détacher » un élément de votre design, par petites touches. Pour l’exemple d’un site internet : les puces des listes à puces, les liens hypertextes (ou les liens au survol).

Pour la choisir, utilisez de préférence le cercle chromatique de cette façon :

Cercle chromatique avec une aide au choix des couleurs contrastes

C’est une méthode, il en existe beaucoup d’autres. Sur mon exemple, vous utilisez le Magenta comme couleur « contraste » du Cyan, vous pouvez remplacer magenta par rouge et cyan par bleu. Il existe une infinité de rouges et une infinité de bleus. Pour trouver vos bonnes couleurs « contraste » rien ne remplace l’expérimentation.

Points de précision

Si vous regardez bien l’AJblog, vous trouverez quatre couleurs, le vert, le bleu, le gris et le rouge. Ce n’est pas un exemple du fameux : faites ce que je dis, ne faites ce que je fais.

En fait, le bleu et le vert utilisés sont ce que l’on appelle vulgairement des couleurs qui « frottent », c’est à dire peu de contraste entre les deux couleurs, une saturation équivalente, une impression visuelle égale. Elles sont presque à considérer comme une couleur unique. La meilleure façon pour savoir si deux couleurs « frottent » est de faire deux aplats de même taille dans un document, de les coller l’un à l’autre. Si en prenant du recul, vous avez l’impression que la liaison entre les deux blocs devient floue, voir dégradée, c’est que vos couleurs flottent.

N’utilisez JAMAIS de couleur forte pour vos textes, sauf pour souligner certains passages, et encore, n’utilisez que la gamme des gris, mais en contraste suffisant avec le « fond » pour une lisibilité optimale.

L’ajout de couleurs à votre document risque de modifier l’impact visuel de vos « gris typographiques » (voir « les bases : le texte et les blancs »). Vous serez donc peut être obligés de revoir vos réglages.

Je n’ai pas parlé du fond général de votre site, la « couleur » de fond, elle aussi à un impact très fort sur votre document. Ce fond créé une « lumière » ambiante, qui peut énormément modifier l’impression visuelle de vos documents.

Pour exemple, regardez le cercle chromatique de base, mais avec différents fonds :

cercle chromatique de base, mais avec différents fonds

Si vous avez un visuel fort qui habille votre site, image, illustration, ou simplement votre logo, utilisez ses couleurs pour habiller votre site, uniquement pour une question d’uniformité graphique.

Pour finir (enfin)

Ce second billet se voulait simple à l’origine, désolé de l’avoir rendu peut être moins lisible en utilisant des « gros mots ».

Si vous n’avez aucune idée des couleurs pouvant aller avec votre site ou votre blog, n’hésitez pas à aller voir la « concurrence », vous vous rendrez vite compte qu’il existe des codes couleur bien précis par secteur d’activité, à tel point que les lecteurs sont habitués à identifier le secteur d’un site internet uniquement sur les couleurs utilisées, pensez-y, ce n’est pas une obligation, vous pourrez vous démarquer quand vous vous sentirez assez confiant pour créer vos propres couleurs.

Ou faites appel à un professionnel. ;)

Les articles de la série:

D’autres sont à venir.

Quelques lectures :

Quelques sites et outils

Quelques notions de mise en page : Les bases, du texte et des blancs

Le problème principal d’une personne qui désire se mettre à internet, c’est que trop souvent elle s’intéresse plus à la technologie utilisée qu’au but final.

Ce qui fait qu’un site est lisible, agréable, ce n’est pas le choix entre tel ou tel langage, telle ou telle base de données, tel ou tel CMS ou encore tel ou tel effet de style plus ou moins à la mode.

Ce ne sont que des outils au service du rendu, au service de votre document.

Nous allons donc, pour l’instant, nous focaliser sur les principes de base de la mise en page, bien qu’ils aient été initialement pensés pour la communication papier aussi appelée « tradi » (pour traditionnelle), on peut sans aucun problème les transposer à la mise en page Web, moyennant bien sur quelques petits agencements.

Je ne vais pas entrer dans les techniques propres à la mise en page pour le web (partie code) pour le moment, cela viendra surement un peu plus tard dans d’autres articles de la série.

Voyons maintenant les éléments constituants un document :

Le texte :

Le texte donne à un document ce que l’on appelle le « gris typographique ». En gros, si vous prenez du recul (physiquement parlant) pour regarder un document, au bout d’un moment vous n’apercevrez plus qu’une « masse » grise.

Ce « gris typographique » sera plus ou moins harmonieux en fonction de différents critères :

  • La police utilisée
  • La taille de la police
  • L’espace entre les lettres
  • L’espace entre les lignes
  • L’espace entre les mots
  • Texte italique ou non
  • Texte en gras ou non
  • L’alignement du texte
  • La justification du texte

Comme vous le voyez je n’ai pas utilisé de gros mots comme « approche », interlignage, graisse ou autre, le but ici est que les concepts soient immédiatement accessibles à tous.

Des réglages fins de ces critères vous permettront d’obtenir des blocs de textes plus ou moins harmonieux, faites des tests, car s’ajoutent la dessus d’autres éléments difficilement contrôlables hors d’un projet précis :

  • La longueur de votre rédactionnel.
  • La taille du bloc de texte (en général on parle de largeur).

Les Blancs :

Le blanc, c’est la pause, la respiration, la coupure dans la lecture.
Le blanc c’est l’élément structurant de votre document. Des blancs trop forts écraseront les contenus, des blancs trop faibles fatigueront l’oeil du lecteur, pas simple.

En faisant un raccourci rapide, le blanc c’est tout ce qui n’est pas contenu, que l’on parle de marges de documents, d’espaces entre « gris typographiques », voir d’espaces à l’intérieur d’un « gris typographique » (saut de paragraphe).

Vous avez maintenant vos deux éléments de base.

C’est tout? Ou sont les images? Quid des couleurs? Des graphismes? De l’iconographie?

Ca c’est pour plus tard, commencez par vous amuser à tester le rendu visuel d’un document lambda (par exemple une page d’un livre).

Un petit exercice :

Utilisez un logiciel de traitement de texte ou de mise en page.

Vous pouvez générer du faux texte en utilisant un générateur en ligne : http://www.lipsum.com/

Créez un texte à trois paragraphes.
Créez un nouveau document avec le logiciel choisi et copiez y votre faux texte.

En premier, changez la police du texte (vous pouvez même en utiliser une différente pour chaque paragraphe, c’est à proscrire en terme de mise en page, mais ça vous fera gagner du temps).

Faites joujou avec vos textes, changez les espacements des lettres, des mots, les tailles des polices, bref tout ce dont je vous ai parlé dans le paragraphe sur le texte.

Changez les marges et observez l’impact sur votre document.

Changez la hauteur des sauts de paragraphe.

Puis passez votre document en mode paysage. Aaargll ça change tout.

Une fois passé en mode paysage, construisez un semblant de page web, vous pouvez utiliser pour cela les tableaux de votre logiciel de traitement de texte ou les blocs de votre logiciel de mise en page.

Première version :

  • Un titre en haut de page. (titre du site)
  • Un sous titre. (titre de la page)
  • Un « menu » horizontal contenant 6 liens : lien 1, lien 2, ou ce que vous voulez.
  • Vos trois paragraphes de texte
  • Un menu de bas de page (reprenez le premier menu)

Une fois ce document réalisé, refaites joujou avec tous les réglages possibles, observez les mutations de votre document, apprenez à maîtriser le rendu.

Deuxième version :

  • Un titre en haut de page. (titre du site)
  • Un sous titre. (titre de la page)
  • Un « menu » Vertical à droite du texte contenant 6 liens : lien 1, lien 2, ou ce que vous voulez.
  • Vos trois paragraphes de texte

Même chose que pour l’exercice précédent.

Pour un meilleur rendu visuel, vous pouvez utiliser les options de prévisualisation fournies avec la plupart des logiciels, pas la peine d’imprimer votre document à chaque modification.

Le temps que vous testiez tout ça, j’aurais surement avancé dans la suite de mes articles sur les bases de la mise en page appliquées aux sites Internet.

Une dernière chose, il faut ben parler technique à un moment ou à un autre, tous ces réglages, qu’ils soient au niveau du texte ou pour la gestion des blancs, sont réalisables en utilisant des spécifications CSS appliquées au code HTML. Si vous n’y connaissez rien, allez faire un tour sur le site d’Alsacréations, il y a de nombreuses sources et de nombreux tutoriels.

A bientôt pour la suite.

EDIT du 13/12/2006 : Merci à Stéphane de Simple Entrepreneur de découvrir des outils en ligne pour nous.

Donc voici trois outils en ligne en ligne pour tester des polices, pour des commentaires allez voir l’article de Stéphane :

Les articles de la série:

D’autres sont à venir.

Le poids des mots, le choc des photos

Si avec un titre pareil je me tappe pas un procès de Paris Match pour plagiat moi…

Plus sérieusement, j’ai envie de vous parler, brièvement, d’un sujet que j’avais soulevé lors de mon interview sur le blog de Mots&co : la ligne presque invisible qui separe contenu de contenant.

Et surtout, l’influence que peut entraîner l’un vers l’autre.

Vous l’aurez remarqué, je n’illustre presque jamais les « accroches » ou les hauts de mes articles avec des images, pourtant on voit ça un peu partout.

La raison en est le parasitage de l’information par l’image en elle même. Une couleur, une forme, un esprit (humoristique, dramatique), une lumière, peuvent orienter la lecture en mettant le lecteur dés le début dans un état d’esprit qui au final peut ne pas coller au texte. C’est un exercice difficile et très périlleux pour celui qui ne le maîtrise pas.

Un exemple que nous avons tous les jours sous les yeux dans les différents forums, blogs et autres messageries instantanées : les smileys.

La dictature des smileys est devenue telle, que si vous faites un trait d’humour un tant soit peu sarcastique sur un forum, sans y accoler le sacro saint « rond qui cligne de l’oeil », les gens ne comprennent pas forcément que vous parlez sur le ton de l’humour et peuvent donc percevoir votre message d’une façon tout autre. A l’opposé, certains placent tout et n’importe quoi, parfois des messages limite insultants, mais grâce encore au sacré saint « rond qui cligne de l’oeil », ça passe…

Faites le test, vous verrez, c’est parfois assez édifiant.

Vous me direz, c’est normal, il manque l’intonation de la personne, on ne la connait pas, on ne sait pas si c’est du lard ou du cochon. Certes, mais le message est bel et bien dirigé par l’apport d’un stimuli visuel.

En fait, j’ai pensé à ce billet en lisant le point de cette semaine.

Il y’a un article sur Ségolène Royale, jusque là rien de surprenant, c’est très à la mode depuis quelques mois.
Ce qui m’a frappé, c’est la photo (grande de surcroît) qui illustre l’article. Pour des questions de copyright je ne la diffuserais pas ici, mais je vais essayer de vous en faire une description assez fidèle :

Ségolène Royal est de trois quart droite, main gauche sous la table, main droite posée à plat sur la table, le buste en arrière, le cou droit et la tête légèrement en avant, ce qui a pour effet de lui faire apparaître un double menton, le regard fuyant vers la gauche (donc ne regardant pas le lecteur), sourire figé et lumière mettant en avant toutes les imperfections de son visage.

Bref une photo ne la mettant absolument pas en valeur, ce qui n’a rien d’étonnant, le Point n’étant pas particulièrement un journal « gauche ».

On arrive donc à la lecture de l’article avec déja en tête une construction mentale de la direction que va prendre l’article : il vont bouffer du Ségolène Royal.

Et bien pas du tout, c’est un article très neutre, tiré d’un livre parlant de sa vie et de son parcourt politique, aucune critique réelle, juste des faits et des anecdotes.

Vous voyez ou je veux en venir?

Si l’article avait été illustré avec une photo « classique » du sujet, je l’aurais lu de façon neutre.

Comme l’article a été illustré par une image « négative », je le perçois négativement, j’ai été « mis en condition ».

Honettement, j’ai été déçu par l’article, pas parce que j’ai particulièrement envie d’entendre du mal d’untel ou untel, mais parce que la photo l’illustrant avait une dimension quasi comique, je m’attendais à autre chose, je ne sais pas quoi, mais autre chose.

Tout ça pour vous dire, attention, un usage abusif de visuels pour illustrer vos propos peut nuire à sa lecture, pensez-y.