Design : ces trucs qui rendent bien pour pas grand chose

Bon, vous faites partie de ceux qui ne savent pas coder et vous n'avez pas envie de vous casser la tête avec tout ça ? En plus vous n'êtes pas spécialement doué en dessin et retouche et de toute manière vous n'avez pas le célèbre photoshop sous la main - et puis pour en faire quoi, vous ne savez pas l'utiliser ! Vous avez bien tenté de passer commande ici ou là mais ça n'en finit plus parce qu'on vous demande un certain nombre de messages avant de passer commande ou bien ce qu'on vous a fait ne vous plaît pas ou encore vous savez d'avance que ça ne vous plaira pas parce que vous avez des goûts compliqués.

Bref, votre design est basique et vous ne savez pas comment y remédier simplement.

Alors voyons voir quelques astuces qui ne vous permettront pas de remplacer un magnifique CSS et codes de toute sorte, mais qui donnera un chouette rendu, ce qui est déjà pas mal.

Avant toute chose, lisez ce billet si ce n'est déjà fait : Design

Il y a besoin du logiciel Photofiltre, qui est gratuit et plutôt simple d'utilisation.

La bannière

Oubliez la bannière rectangulaire en haut du forum et tentez un "fond-bannière".
En somme, vous prenez une jolie image qui fera office de fond de forum et qui est à la fois assez grande pour couvrir un grand écran d'ordinateur et à la fois avec un dessin assez centré et assez en haut pour y caser le titre et que ce soit visible sur les petits écrans.

Par exemple, voici une image de fond. La bannière avec le titre du forum est en haut et intégrée à l'image, les catégories du forum vont se trouver sur la partie avec les planches. Sur un grand écran on verra toute la largeur de la bannière, sur un petit écran, on ne verra que la partie centrale avec l'arbre et le livre.

Pour arriver à un tel résultat il faut :

* Mettre cette image comme fond (affichage -> gestion des images -> image de fond du forum)

* Créez une bannière transparente (sur photofiltre, créez une nouvelle image (qui est blanche par défaut), sélectionnez la en entier et "image -> couleur de transparence -> sélectionnez le blanc et 0%) et mettez là comme bannière. Il faudra jouer sur sa hauteur de manière à ce que les catégories du forum se placent correctement, ni trop haut ni trop bas. En revanche, préférez une largeur assez faible (pour que le forum s'adapte aux petits écrans).

* Ne pas mettre de titre au forum (affichage -> page d'accueil -> afficher le titre du forum "non"

* fixer le fond du forum pour éviter qu'il ne bouge et qu'il se dédouble (général -> forum -> configuration) Dans "description du site, entrez ce code tel quel :

* Mettre un fond de forum invisible (affichage -> images et couleurs -> retirer le code pour mettre en invisible de "couleur intérieur du cadre du forum" et "couleur du cadre du forum"

Les icônes

Rien n'est plus laid qu'une image carrée mise telle quelle sans rien pour améliorer.
Si vous savez faire, faites des icônes avec des bords découpés en utilisant la transparence (mais attention, sans que ce soit horriblement pixelisé sur les bords). Si vous ne savez pas faire, utilisez les "photomask" de photofiltre, pour mettre un tour de la couleur de fond de votre forum. C'est de la triche, mais ça ne se voit pas ! (enfin ça ne se voit pas tant que vous gardez le même fond de forum)

Les images

Ne gardez pas un forum tout nu sans rien d'autre que la bannière et les icônes ! Une jolie image pour égayer le panneau d'accueil, des images de lieux dans les catégories...
Mais attention, comme dit juste au-dessus, ne collez surtout pas une affreuse image telle quelle. Essayez de la découper, d'y intégrer du texte, un cadre... mais n'en faites pas trop non plus !

Mettez des images pour chaque lieu. Il faut qu'elles aient toutes une unité : même taille, même style de cadre même style de dessin ou photo etc. Essayez de rester aussi dans les tons du forum question couleurs (les filtres de couleur de photofiltre peuvent régler radicalement la question) et dans le style d'images déjà utilisées pour la bannière et les icônes. Privilégiez une taille en largeur (mais pas trop !) plutôt qu'en hauteur.

Dans le prochain post, quelques liens qui peuvent toujours être utiles. :)