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 !