Idées de design

Depuis la mise en place de mon nouveau moteur de blog en janvier dernier, j'ai préparé la grosse mise-à-jour suivante du présent site. C'est encore loin d'être fini, mais il me semble qu'il est temps de réfléchir au futur desgin de ce site.

Le problème, c'est le choix

Récemment mon futur moteur de blog a passé une étape importante, vu qu'il est capable d'envoyer des fichiers présents sur le disque, ce qui veut dire qu'il s'agit approximative d'un serveur HTTP minimal mais complètement fonctionnel.

On pourrait me dire avec raison que c'est loin d'être un moteur de blog terminé, mais ce cap qui vient d'être franchi signifie que tous les détails bassements logistiques sont réglés, il ne reste plus qu'à s'aoccuper du contenu proprement dit. D'où la question du desgin général du site.

Il faut voir les choses en face, dans son état actuel le site est très laid. En plus, il a un look archi-classique de blog, ce qui n'est pas forcément un mal, mais ce n'est quand même pas très satisfaisant.

Donc une des questions qui me préoccupent en ce moment est : Quel design adopter pour ce site ?. Je n'ai pas trop d'idée, c'est pourquoi je fais appel à tout mon (maigre) lectorat, dans l'espoir de voir émerger un design original, joli et pratique. Je suis ouverte à tous les conseils sans discrimination, je ferai le tri après.

Ce qui ne va pas actuellement

C'est toujours plus facile de regarder ce qu'il y a(vait) avant au lieu de se lancer dans un truc ex-nihilo. Après tout, qu'est-ce qui ne va pas dans le design actuel pour avoir une telle volonté à le changer ?

La première chose, qui saute aux yeux, c'est le choix pitoyable des couleurs. Bon, les goûts et les couleurs, ça ne se discute pas, mais quand même. Il me semble clair qu'il faut utiliser plus de nuances. Je pense que le choix de la couleur dominante est libre, mais je pense quand même me tourner plutôt vers du bleu tirant sur le vert, à la plce du rose-violet actuel.

La deuxième chose, moins évidente mais que tous ceux qui visitent régulièrement ce site on dû remarquer : il n'y a absolument aucune structure dans le contenu. C'est juste un tas d'articles hétéroclites posés en vrac sur un même site. Il y a juste un semblant d'ordre qui est fourni par les catégories, mais je ne suis pas sûre que ces trucs soient réellement utilisés.

Donc mon nouveau design devra faire ressortir une structure plus ordonnée. Déjà, je vais séparer la catégorie Moi du reste, en faisant une partie du site dédiée à mon journal personnel.

Troisième chose, que peut-être peu de gens ont remarqué, mais qui me turlupine quand même passsablement : le manque d'originalité du design. La page d'accueil de ce site a l'air d'être juste un pauv' blog anonyme comme il en existe des millions d'autres.

Ce qui est le plus gênant là dedans, c'est qu'au fond lorsqu'on voit un truc qui ressemble à l'archétype du blog, on le pose tout de suite dans la catégorie blogs et on passe à la suite. Il me semble qu'il y a pourtant ici du contenu qui mériterait plus d'égards qu'une pauv' entrée de journal intime dont tout le monde se fout.

Quelques idées en vrac

À partir de ces constatations (si j'ai oubliées d'autres erreurs commises dans le présent design, merci de me les signaler), je vais jeter quelques idées sur mon futur nouveau design, et je vous invite à faire de même dans l'espoir de voir le schmilblick avancer.

Pour le gros du texte, il me semble que rester simple et bien net est une bonne idée, les couleurs c'est juste autour pour faire joli. Donc je compte rester en noir sur blanc, ou peut-être gris sur blanc, ou noir sur gris, ou gris sur gris, je ne sais pas trop encore.

Le type de design que fait Ness, à base d'image et de zones cliquables, est pas mal, mais il ne me plaît pas assez pour avoir envie de partir dans ce sens. J'ai du mal à verbaliser un pourquoi clair, c'est plutôt l'intuition que ce n'est pas du tout adapté à mon cas.

La gestion de la largeur est une question qui me semble importante : tous les designs que j'ai pu imaginer font appel à des colonnes, sous une forme ou sous une autre (fût-ce avec une seule colonne). Donc un gros choix : est-ce que je laisse toute la largeur de la page à l'article, ce qui permet l'insersion de grandes images sans soucis ; ou est-ce que je réduis la largeur de l'article, pour faciliter la lecture du texte ?

Et une fois la question de la largeur résolue, se pose la question des colonnes, aussi bien au niveau du nombre que du contenu, et que ces colonnes soient au dessus et en dessous d'un article qui prend toute la largeur, ou à côté d'un article étroit.

Et quelle place donner aux images ? J'ai bien conscience, que dans son état actuel mon blog est un brin copieusement textuel, et qu'il serait bienvenu d'ajouter quelques illustrations en rapport avec les articles. Mais à l'échelle du design, est-ce une bonne chose de se limiter au CSS ? Ou bien serait-il bienvenu d'ajouter des images au design, par exemple pour des jolies bordures de cadre, ou pour égayer les titres ?

Publié le vendredi 9 mai 2008 à 14:17.

Catégorie : Site

Commentaires

1. Le dimanche 11 mai 2008 à 10:24, par Ness :

Alors, mon avis.
La colonne de texte est beaucoup trop longue. Il faut éviter les trop grandes largeurs, car ça rend les phrases interminables.
Le gris (#333333) sur blanc est très agréable, moins pétant que le noir sur blanc et la différence, qui n'est pas énorme au niveau du contraste, rend la lecture plus agréable.
Evite le bleu, pour les sites internet, c'est très moche. Pars plutôt sur du bordeaux, du brun. (bon, ok, je ne suis pas objective, je déteste le bleu pour les sites internet)
Le côté "mélangé" des articles ne me gêne absolument pas. Justement, les catégories sont là pour une bonne raison.
Si tu veux absolument faire un menu, pourquoi pas, mais je n'y vois aucun intérêt dans ce cas précis.
Des images au design, ouais, pourquoi pas, mais ce n'est pas non plus indispensable. Il est tout à fait possible de faire un très chouette blog sans image. En revanche, une image de header (genre, des vibrisses) serait sympa.
Je vois tout à fait un blog dans les gris-noir-blanc, avec une jolie couleur de contraste (rouge serait trop agressif, mais un vert clair ou un orange feraient l'affaire), largeur fixe (désolée, mais les lignes qui font trois km, c'est un peu casse-pied. Et même sur mon mac en 1280x800, les lignes font déjà 3km) avec un background soit en couleur unie, soit avec un léger motif.
Regarde ce que j'ai fait pour le site d'Anna Galore : http://anna-galore.com/
C'est pas du travail de pro, je n'y ai passé que quelques heures et il y a plein d'améliorations à faire, mais la largeur est idéale pour la lecture et le background ne distrait pas.

2. Le mardi 13 mai 2008 à 10:42, par Natacha :

Je reste fermement opposée au principe du design à largeur fixe en pixels. Il suffit d'avoir comme moi un écran avec des pixels petits pour que ça devienne très pénible, et il suffit d'être un peu loin de l'écran (par exemple parce qu'on s'occupe en même temps d'un deuxième ordi') ou qu'on ait quelques soucis visuels pour que ce soit affreux. Je posterai ce que donne ton site avec des lignes de 1.5 cm de haut sur mon écran, pour donner une idée. Parce que c'est bien joli de s'obséder sur un problème que l'on perçoit avec des yeux qui n'ont pas trente ans sur des affichages « normaux », mais il ne faut pas tomber dans l'excès inverse.

Cela dit, j'ai conscience aussi du problème des lignes trop longues. Knuth pensait que la largeur idéale d'un texte, c'est 60 caractères (ou 66, j'ai un doute). C'est sans doute extrémiste, mais il me semble que le principe est bon, c'est pour ça que j'envisageais sérieusement un design où le texte principal aurait une largeur fixe en EX (genre 75ex, ça a l'air pas mal pour essayer), et le navigateur qui se débrouillerait pour placer autour des cadres comme ceux qui sont en ce moment sur la colonne de droite.

Et merci pour les autres remarques, sur lesquelles je n'ai rien à ajouter ;-)

3. Le mercredi 14 mai 2008 à 13:48, par _FrnchFrgg_ :

Le mieux c'est d'avoir une colonne principale avec un max-width en ex. Comme ça si par hasard la fenêtre du navigateur est plus étroite, tu n'obtiens pas de barre de défilement verticale "spurieuse".

Sinon, Ness, si tu as un écran très large (comme moi d'ailleurs), tu as pensé à avoir ton navigateur sur la moitié seulement de l'écran en découpage vertical, avec autre chose à côté ? Ou encore avoir les tabs sur la droite dans Firefox ou Safari (si tu utilises des tabs). Je ne sais pas comment on fait pour faire ça avec safari, soit dit en passant.

Avec un portable c'est difficile, mais avec les fixes il reste aussi la possibilité de tourner ton écran, les cartes vidéos de nos jours gèrent ça très bien (du moins sous Linux, mais j'ai souvenir que ça marchait aussi pas mal sous Windows, ça m'étonnerait que les Macs ne sachent pas faire ça). Avoir un écran plus haut que large est plutôt logique pour la plupart des travaux, reste à remettre l'écran normalement lorsqu'on veut regarder un film sur l'ordi. De plus en plus d'écrans modernes ont même un pied pivotant...

4. Le jeudi 15 mai 2008 à 20:34, par Ness :

Tu peux m'expliquer ce que sont les "ex" ? Parce que les PX et les EM je connais, mais les EX, je ne sais pas ce que c'est (je ne dis pas que ça n'existe pas, je ne connais pas, c'est tout)

Sinon, FrnchFrgg, mon écran est en 1280x800, standard, donc. Mais les lignes sur le blog de Nat sont déjà trop longues.
J'ai un écran cathodique, pas trop envie de le tourner, donc ;)

5. Le jeudi 15 mai 2008 à 20:47, par Natacha :

Dans l'idée, un Ex c'est du même genre qu'un EM, c'est-à-dire une unité de longueur qui dépend de la police de caractères utilisée. Donc faire une largeur en EM irait aussi.

Pendant longtemps, y compris au moment où j'ai rédigé le précédent commentaire, j'ai cru que que l'Ex était la version horizontale de l'EM, c'est-à-dire « EM = hauteur de la lettre M et Ex = largeur de la lettre x ».

Il semblerait qu'en réalité il n'y ait rien pour l'horizontale, et l'EM c'est la hauteur du caractère mobile M (i.e. le bout de métal), c'est-à-dire la hauteur de la ligne sans les interlignes, et l'Ex c'est la hauteur du x minuscule, et donc toutes les lettres minuscules hors jambages et hampes.

Cela dit malgré cette erreur, l'Ex me semble rester une bonne approximation de la largeur typique d'un caractère, alors que c'est plus dur (au moins pour moi) d'avoir une intuition horizontale en EM.

6. Le samedi 17 mai 2008 à 17:51, par _FrnchFrgg_ :

Ness, tu as un écran cathodique 16:10 ? Ça doit être la première fois que j'en entend parler.

D'autre part, mon écran aussi est en 1280x800, et c'est une résolution "wide-screen", donc c'est particulièrement adapté aux contenus côte à côte, ou alors à mettre tes tabs (voire ta barre des tâches) sur le côté plutôt qu'en bas. C'est logique, tu as de la place à revendre horizontalement, mais pas verticalement...

Copyright © 2007-2008 Natacha Kerensikova

Lithium Blog - commit dad867adc7a3fc6476990c37fcfa09685831b7d9 - Thursday 7 February 2008