TIPS : Optimisation de votre design
Je vois beaucoup de forums prometteurs ouvrir dernièrement, où la hype se build énormément jusqu’au jour du lancement. Malheureusement, les bases des designs ne sont souvent pas solides, ce qui impacte directement la communauté qu’ils auraient pu recevoir. Quelques tips de ma part pour qu’un design reste simple tout en étant efficace, et surtout fonctionnel ;
Harmonie des couleurs ;
Difficile d’accrocher à un design lorsque les contrastes des couleurs font violence. Dans un premier temps, il est évident qu’il faut toujours prévoir les couleurs du design en fonction de son header (ou inversement). La palette de couleurs doit rester cohérente et harmonieuse, ce qui n’est souvent pas le plus simple à créer. Si vous ne sentez pas l’inspiration venir, vous pouvez tout à fait utiliser l’outil pipette de photoshop pour récupérer quelques couleurs du header à disposition, ou bien utiliser des plateformes comme Coolors, qui génèrent des palettes prédéfinies en fonction de vos attentes. Lors des dernières années, il a aussi été remarqué que les designs aux couleurs douces ont tendance à attirer plus de monde que les saturées.
Concernant le choix de la couleur des paragraphes, veillez à ce que celle-ci soient assez contrastée, tout en ne jurant pas avec le design. Par exemple, si vous avez un fond blanc, ne mettez jamais un noir à 100%, cela pourrait alourdir le design. Un gris foncé fera parfaitement l’affaire, et adoucira le tout.
Lisibilité des textes et choix polices ;
Beaucoup de designer vous diront une chose ; ne jamais mélanger différentes familles de polices, comme les Sherif (polices à empattement ; ex. Times) ou Sans Sherif (polices sans empattement ; ex. Arial). Cela dit, il y a évidemment quelques variables à prendre en considération. Si vous choisissez d’utiliser une police Sherif pour vos titres, les paragraphes devront toujours utiliser eux une police Sans Sherif : la raison est simple, ceux-ci sont souvent plus petits, et une police à empattement aura tendance à alourdir votre design. De plus, cela le rendra très certainement “vieillot” ou alors le tirera vers un univers légèrement plus fantastique.
Il est évident que les polices ne devront pas être trop petites de façon à privilégier l’accessibilité, je ne vais pas m’étendre sur le sujet, j’ai vu certains threads passer sur le sujet qui regroupent déjà beaucoup de ressources.
Optimisation des images ;
C’est surtout ce point là qui m’a fait penser qu’il fallait que je fasse ces tips. Vous ne savez pas à quel point, pour les utilisateurs d’écrans rétina, il peut-être douloureux de tomber sur des designs prometteurs, mais dont les dimensions ne correspondent plus aux normes du web de nos jours. Forumactif est une plateforme vieillissante et dont les limitations se font de plus en plus ressentir, cependant il y a toujours des moyens simples de les contourner.
Un écran rétina a ses pixels multiplié par deux, c’est pour cette raison que de nos jours les avatars sont passés du 200*320 au 400*640 de façon à ce que ceux-ci restent parfaitement nets pour tous les utilisateurs. Dans cette optique, les designs des forums doivent également être adaptés, et de ce fait, votre header devrait faire deux fois la taille de ce que vous aviez prévu pour votre forum. Si celui ci a un affichage de 800px de largeur, alors en développement sur Photoshop, vous devrez le créer en 1600px. Ensuite, un simple code dans le css pour le réduire à 800px lui permettra d’atteindre sa pleine qualité pour tous les utilisateurs.
Dans le cas contraire, les utilisateurs d’écran rétina verront votre design flou et pixelisé, et ne seront donc logiquement pas invités à s’inscrire.
Optimisation du codage ;
Là encore, certaines nouveautés échappent encore aux créateurs, ce qui les empêche malheureusement d’avoir un forum facilement adaptable, créant une perte de temps et de fonctionnalités. Le codage est une zone assez vaste qui est propre à chacun, je ne pense par exemple pas qu’il y est une bonne ou mauvaise façon de coder à partir du moment où le résultat obtenu est fonctionnel. Cependant, j’insisterai surtout au niveau des couleurs, sur le fait d’utiliser impérativement des variables ( var(–x) ) à la place des couleurs fixes (#000000 par exemple). Une variable vous permet lors des changements de design, de cibler toutes les parties utilisant la même couleur, en même temps. Par exemple, votre premier design avait un même bleu quelque part, noté à la variable “c1”, le prochain design demande du rouge, eh bien vous aurez juste à changer une seule fois la couleur de cette variable “c1”, plutôt que d’avoir à chercher le code du bleu dans chacune des parties où il est utilisé. Gain de temps incroyable ! J’appuie sur le fait qu’il est jamais trop tard pour coder de cette manière !!! Votre forum peut être créé depuis 10 ans et adopter aujourd’hui ce changement, ça ne vous demandera normalement pas énormément de temps à adapter le tout.
Certains forum manquent également de place dans leur CSS, il est alors tout à fait possible d’ajouter une seconde page (je dirais même fortement conseillé) hors forumactif. Vous pouvez utiliser des logiciels gratuits comme Brackets pour coder du css, puis l’enregistrer en xx.css ; suite à cela, l’héberger sur Google Drive ou bien DropBox, et l’ajouter en lien extérieur via la balise <link href=“nomdelapage.css" rel=“stylesheet”> dans le template “Haut du Forum”. (Vous trouverez facilement d’autres balises link au début de cette page, mettez cette balise à la suite et hop.
Version sombre (please) ;
Avec l’utilisation des variables, vous aurez également la possibilité d’installer très facilement une version sombre sur votre forum. Je ne répèterai jamais assez l’importance de celle-ci. Lorsqu’il est 23h, que les yeux sont fatigués mais que l’inspiration est là, passer le forum en version sombre est un réel bénéfice pour tout le monde.
Petit tutoriel simple et efficace créé par bigbadwolf pour une installation réussie par ici ;
https://comptoirdesrolistes.tumblr.com/post/650710791464583168/bigbadwxlf-tuto-dark-light-mode-pour-passer
Voilà voilà, j’espère que ce message (plus long que prévu aha) saura guider ceux qui s’y connaissent parfois moins en la matière ! J’oublie probablement pas mal de choses à vrai dire, mais je crois que le principal concernant l’optimisation est là !
Bonne journée à tous !