Coucou
Me revoici avec ta partie graphique ^^ N'hésite pas à me demander si tu as besoin que j'approfondisse mes idées ou que tu souhaites un meilleur développement sur certains points. J'ai essayé de détailler au max mais on ne sait jamais
Je t'ai également quelques "modestes" modifications pour mieux te montrer visuellement à quoi je pense pour ton design actuel et que ça soit plus clair pour toi pour imaginer les choses. (après j'ai fais ça assez vite en passant par quelques chemins tordus donc niveau du code faut pas trop y faire gaffe
)
Bonne lecture
Partie Graphisme
Dans ce bout d’analyse, je vais me pencher en détail sur l’aspect graphique de ton forum. C’est important de garder à l’esprit qu’un visuel agréable crochera plus facilement sur un design harmonisé que quelque chose de trop surchargé. Je conçois que ce n’est pas évident du tout, surtout de faire tout un design, mais on va tenter de regarder ça au mieux ^^ Dans un premier temps, nous verrons les erreurs réalisées sur ce design, ce qui peut choquer un visiteur et qui donne un aspect assez rustique au forum en lui-même. Il s’agit d’une démarche faite avec des solutions suggérées et des conseils pour améliorer sa pratique. Après je ne dis pas que je suis une grande artiste non plus ^^ Mais on peut faire des designs simples tout en restant efficace. Ensuite, je vais faire une proposition d’un autre type de design qui pourrait bien s’accorder en restant dans l’idée que vous avez. Ca sera des conseils, des suggestions d’éléments en particulier et ce qui me semble le plus important à traiter pour donner une autre dimension au design du forum.
Analyse du Design
Ici, tous les éléments seront analysés et commentés un par un de la bannière jusqu’à l’intérieur d’un message. L’idée ici est de faire ressortir ce qui va et ne va pas. On ne s’occupera pas du code en lui-même mais juste des éléments graphiques, voire un peu de positionnement.
Aperçu de la page principale du forum
Tout d’abord, la première chose que je conseille de faire, c’est d’éviter les mélanges de couleur. Comme on peut le voir, le gris du fond forum ici ne va pas vraiment avec le design derrière. C’est difficile de trouver une couleur qui peut s’accorder avec un côté noir et bleu et l’autre côté rouge et bleu. Là j’aurais tendance à utiliser un fond noir à la place du gris et régler la transparence pour qu’on ait une impression de vitre, de reflet, beaucoup plus intégré avec le fond. Eventuellement même un fond noir pourrait passer car il serait mieux intégré et moins hors sujet que le gris. J’ai essayé avec du blanc aussi mais le blanc n’a pas l’air de bien passé pour un fond donc sur ce type d’arrière plan soit du noir (un peu lumineux pour donner un peu de relief, j’entends par ici pas la couleur noire elle-même mais jouer avec la palette pour tirer vers un noir plus clair) soit du noir avec réglage de la transparence pour l’effet vitré. Ca fait un forum plutôt sombre mais niveau de l’intégration ça passe mieux que le gris.
Ensuite la deuxième chose qu’il faudrait faire, c’est réduire le fond du forum. En effet actuellement nous sommes habitués à voir des corps de forums minces (sans aller dans les extrêmes non plus). Avoir un corps trop élargi donne une sensation de vide sur les bords pas très agréable pour l’œil et nous donne l’impression d’un design où on se perd dans la largeur. Il faudrait vraiment que le corps laisse un fin espace avec les catégories pour éviter un vide trop conséquent autour. Un réglage à 50% de la largeur au lieu du 65% actuellement serait déjà mieux et moins vide.
Passons au menu de navigation sur la gauche du forum. Je trouve qu’il flotte trop dans le vide et cela le rend très discret pour ce que c’est. Je pense que tu devrais le faire ressortir un peu plus en y ajoutant une petite bordure, un background blanc ou noir avec effet de transparence et une petite lueur éventuellement (box shadow) pour lui donner un peu de relief. De cette manière on le repère mieux et cela ne donne pas l’impression d’avoir des liens qui flottent dans le vide et posés un peu par hasard.
Puis le fond du forum. Il est bien trop flou et pixellisé, ce qui donne un aspect assez brouillon. Peut être que tu as essayé de l’étirer pour qu’il s’adapte à chaque type d’écran, le souci c’est qu’en fonction des écrans, ça peut apparaître plus ou moins pixellisé ce qui ne fait pas très beau. Il y a une petite astuce avec background-size : cover qui permet d’adapter un arrière plan de manière responsive et sans en perdre la qualité. C’est quelque chose à tester pour voir si ça n’arrange pas les choses.
Passons à la bannière. C’est un des éléments qui perturbe le plus quand on arrive sur ce forum. En effet, les éléments manque d’harmonisation et d’intégration. C’est une idée originale d’avoir fait des déchirures pour mettre des petites images en rapport avec vos deux thèmes, le problème c’est que ça ne passe pas très bien avec l’image de fond. En effet, ça donne plus l’impression d’éléments qui ont été posés ici et là au hasard mais en terme d’harmonie c’est déstructuré et gâche le fond. L’arrière plan avec des étoiles et de cette planète ne colle pas très bien avec tous ces petits éléments, ça ne va pas ensemble. Si tu avais mis un arrière plan de papier ou éventuellement une sorte de façade, ça serait mieux passé. A ta place, je n’aurais pas mis tous ces éléments mais juste deux personnages (donc des acteurs ou célébrités d’un côté et de l’autre de la planète avec une teinte sur eux, bleu pour l’un, rouge pour l’autre et avec une allure, une expression différente pour symboliser le contraste). Par exemple tu peux avoir une personne dans une tenue simple et souriante d’un côté et une personne avec une tenue plus sombre, excentrique au regard malveillant ou sadique ou encore séducteur de l’autre côté). Les mettre légèrement en transparent aussi pour donner une meilleure intégration dans le fond sans qu’on ne donne l’impression qu’ils soient juste posés comme ça. C’est l’intérêt de travailler sur les teintes, chercher à les mettre en avant mais il faut un travail dessus (pour les harmoniser avec le fond utilisé). Ensuite il y aurait un travail à faire sur la typo également pour lui donner plus de relief et d’identité. L’écriture utilisée est handwritting donc ça lui donne un effet écrit. Sauf que ce n’est pas l’idée que je me fais de ton forum. « Two Worlds in Pain ». Deux mondes dans la douleur. Je pense que tu peux essayer une écriture plus structurée, épaissie avec un travail sur les lettres pour montrer le contraste entre le rouge et le bleu. Ne pas hésiter non plus à varier les polices. « Two Worlds » dans une police plus géométrique, épaissie et carrée (en bâtons) et « In Pain » dans une police grunge, déstructurée, qui donne un effet sale, donnant vraiment plus de dimension au mot Pain. Il faut surtout éviter l’accumulation d’éléments. Mieux vaut deux images de personnages plutôt que tout un tas de petites images pour symboliser le contexte du forum. Maintenant, j’ai juste donné des conseils pour améliorer cette bannière mais comme je l’ai dit dans la première partie, la planète ne nous fait pas tilté sur le contexte « ville » du forum mais plus sur quelque chose de futuriste et fantastique. Nous verrons comment faire une bannière plus proche des thèmes dans la suite de cette partie d’analyse ^^ Je pense aussi que c’est pas mal de rajouter un slogan (donc un sous-titre) qui donnerait une accroche à votre forum, quelque chose qui permette d’intriguer, attirer la curiosité (sauf que le sous titre devra quand même être moins gros que le titre de base.) Voici un exemple de forum avec un sous titre vraiment sympa je trouve pour se mettre dans l’ambiance : http://alonetogether.forumactif.org/
Une petite remarque sur le menu de connexion. Je pense que tu devrais le centrer (donc réduire sa largeur de base) pour éviter qu’il prenne toute la page et changer la couleur de fond. En effet ce blanc est beaucoup trop agressif avec le reste du forum. A la limite un blanc cassé peut faire l’affaire mais avec les conseils que je t’ai donné avant, il faudrait également une teinte bien plus foncée pour lui donner du relief (autre que du blanc et s’accordant avec le noir derrière donc du sombre mais plus clair que le noir utilisé pour la couleur de fond). Aussi, pense à le décoller de la PA. Ca ne fait pas très beau de le voir se coller à un autre élément. Une meilleure aération sera plus agréable pour les yeux.
Un petit passage rapide sur les boutons et après j’attaque plus en détail les gros blocs ^^ Pour ces boutons, le petit souci c’est qu’on a du mal à différencier le nouveau message de l’ancien du sujet verrouillé. Pour cela je conseille de rajouter en toutes petites minuscules, en diagonale sur le loup un « New » pour un nouveau sujet (écriture de couleur claire), « old » pour ancien message et « lock » pour le sujet verrouillé. Textuellement ça sera plus parlant. On peut aussi ne pas mettre « old » et laisser juste l’image pour l’ancien et se contenter d’un X pour le sujet verrouillé. Mais ce sont des abréviations plus instinctives permettant de savoir directement à quoi correspond l’icône. Dernière solution, tu ne mets une icône que pour un nouveau message. C’est-à-dire que les icônes pour old et verrouillé n’apparaissent pas. Cela sautera tout de suite à l’œil et ça t’évite d’avoir trois boutons différents surtout que le signalement de pas de messages ou de sujets verrouillés n’est pas spécialement important.
Exemple pour illustrer La PA
Au niveau de la structure, ça reste plutôt sobre, discret, pas trop tape à l’œil. Du côté de l’effet flashouillant d’éléments là tu n’as pas été trop gourmand ^^ Je ne suis pas trop fan des images avec les infos qui apparaissent au survol, préférant tout voir d’un seul coup d’œil mais on verra ça plus bas dans proposition d’autres idées. Ce qui m’a le plus perturbé dans ta PA, c’est les titres. En effet, ceux-ci sont gros, dans des couleurs très simples et donnent l’impression d’avoir été posé un peu comme ça. On ne comprend pas trop non plus pourquoi le titre du contexte est en noir. Moi déjà j’aurais plus vu une police en bâtons ici aussi. Tu en as deux types sur cette PA que tu utilises, celles de la bannière et une autre (pour les titres des blocs). Essaie de rester harmonisé là-dessus pour éviter le cumul des polices différentes. De plus j’ai l’impression que tes titres pixellisent un peu. Je pense que le mieux aurait été de les sortir des cadres mais peut être à cheval entre le cadre ou le fond ou bien les rendre plus incrustés dans les images (les rendre plus petits, plus transparents par exemple…). Les images montrant les différents lieux jouables manquent également de travail. Déjà pour l’hôpital je ne trouve pas l’image adaptée même si ça représente l’intérieur d’un hôpital, mettre plutôt la structure extérieure d’un hôpital passerait peut être mieux. De plus la typo laissée dessus est trop grosse, maladroite comme posée un peu dessus. Là aussi je te conseille plus une police en bâtons, plus petite et discrète, soit en haut soit en bas, centré, peut être même en entourant d’un léger cadre. Il pourrait y avoir aussi un travail des couleurs pour harmoniser la teinte des trois images afin d’avoir l’impression qu’on a des images de même qualité plutôt que des choses très différentes.
Les petites symboles différents pour chaque lien de menu sont originaux le seul problème c’est qu’ils sont trop différents et donnent une sorte d’accumulation. Tu devrais harmoniser avec un seul symbole ou les enlever complètement car ça ne me semble pas nécessaire.
L’écriture du contexte de la PA n’est pas du tout visible. En effet le noir ressort très mal sur ce fond. Je pense que tu devrais plutôt essayer de mettre du blanc (pour s’harmoniser avec le reste des textes) avec un effet text shadow derrière pour lui donner du relief et ainsi bien le faire ressortir. Attention aussi au lien « Lire la suite ». Il faut se démarquer, le rendre différent du reste pour qu’on voit bien que c’est un lien et non pas du texte. Le lien est justement fait pour cliquer dessus. Une couleur différente permet justement de faire quelque chose de plus instinctif pour le visiteur. On a plus tendance à cliquer sur un lien qui contraste plutôt que sur quelque chose qui ressemble au reste du texte).
Je ne dirais rien en revanche sur les petits cadres des tops-sites et partenaires puisque ça fait partie du codage, on verra ça dans cette partie ^^
Les catégories
Le premier truc qui saute à l’œil quand on regarde les catégories avant même de lire les informations à l’intérieur, c’est les images utilisées pour les fonds des titres des catégories et le fond en lui-même. Pour le titre des catégories, les couleurs sont très flashys, ça manque d’harmonie et on dirait (ce qui est le cas) que tu as pris un bout d’image. Il faut essayer le plus possible de jouer sur un effet de dégradé, de motifs, de textures, quelque chose qui a une répétition claire, c’est ce qui passe le mieux. Ca me rappelle quand j’ai fait le même style de chose pour mon propre forum et que je trouvais ça pas terrible dans ce que j’avais fait ^^ Bien sûr on peut aussi faire un fond plus travaillé, dans une image par exemple (un bout de ville en exemple…) mais dans ton cas je te conseille d’aller sur de la simplicité. Simple mais efficace, on trouve de très jolies textures ou motifs qui s’intègrent très bien sur une catégorie pour lui donner un effet sympa. Pour le titre, je pense que tu pourrais essayer une autre police pour te démarquer du reste ici et donner vraiment une dimension de titre au titre. Pas quelque chose de handwritting mais regarde du côté de google fonts il y a des choses sympas pour donner un peu plus d’allure à ses titres ^^
Ensuite le corps de la catégorie. L’image utilisée ici est très chaotique. En effet tu as un côté bourré de traits et un autre côté moins rempli. On ne voit que ça et ça empêche même de se concentrer sur les blocs de texte. Les images sont là pour décorer et apporter un aspect discret au design. Mettre une image trop surchargée attirera forcément l’œil et on peut même avoir une impression de désordre. C’est tout à fait possible d’utiliser des images dans le fond des catégories mais dans ton cas, comme pour les titres, il faudrait jouer la carte de la simplicité en prenant une image bien répartie au niveau de ses éléments (pas un côté presque vide et un côté presque plein) pour donner une impression de lissage, d’unicité. Là aussi je te propose plus de te tourner vers les motifs, textures ou une couleur unie dans le pire des cas qui donnera un aspect très simple mais restant propre. Au niveau des couleurs utilisées, soit tu peux rester dans les teintes du forum (avec des tons foncés) soit tu peux créer un contraste avec une couleur très claire au contraire. C’est quelque chose qui marche bien et ça peut donner de la luminosité à ton forum (certains visiteurs sont un peu rebutés par les fonds trop noirs à cause des reflets, des choses toutes sombres). L’une et l’autre sont faisables. Une couleur claire donnera de la luminosité à ton forum alors qu’une foncé ira plus dans la continuité des couleurs utilisées jusqu’à présent.
Au niveau de la bordure, tu peux légèrement réduire l’épaisseur, même essayer de donner un effet lueur dessus pour donner du relief. En effet la bordure est un peu grosse et ça aura plus de style et un côté épuré de faire quelque chose d’assez fin. Enlève également le radius autour de la bordure interne des catégories pour l’effet de continuité. Plus agréable à l’œil que ce qui est en place actuellement. En effet, ça donne l’impression que les deux éléments ne vont pas ensemble, qu’il n’y a pas de fluidité.
Passons ensuite au visuel des catégories en question. D’abord, le cadre autour des titres de forum est de trop. En effet tu mets de la bordure sur de la bordure et avec le gros contraste que ça fait c’est de l’accumulation pas vraiment utile. Autant faire les choses à petit dose. Par exemple tu mets une bordure sur le titre mais pas autour du bloc des derniers messages ce qui donne une sorte de confusion entre les différents blocs. De plus, le texte à l’intérieur n’est pas centré ce qui donne une impression de vide.
Ai niveau des blocs de description, je pense que l’intérieur ne me dérange pas. C’est espacé, pas trop petit, pas trop gros. Le seul truc qui ne va pas, c’est les images collées vraiment au bord du texte. Là il y a besoin d’aérer pour ne pas que ça colle et gêne le texte à côté. Pourquoi pas même tenter une petite rotation sur les icônes pour donner une meilleure dynamique à tes blocs de description (même si la rotation ça passe très bien aussi. Aussi, décoller l’image du bord en bas pour qu’elle soit mieux centrer dans le bloc, un petit espace est toujours plus agréable ^^
Enfin, ne pas hésiter à jouer avec les teintes des fonds de chaque bloc pour que ça s’harmonise avec la couleur ou la texture utilisée dans le fond du cœur de la catégorie.
Ensuite je viens de voir à l’instant en survolant l’icône de loup que ça faisait apparaître les sous forums. Première chose le fond des sous forums ne s’accorde pas vraiment avec le fond des textes mais aussi mettre du texte sur du texte n’est pas très joli. De plus ce n’est pas instinctif et si je n’avais pas passé la souris par hasard sur l’icône je n’aurais pas fait attention. Autre petit détail gênant, quand il y a trop de catégories ça met un scroll et quand tu te retrouves avec deux scrolls (description + sous forums) ça ne fait pas très beau. Je pense donc qu’il faudrait placer les sous catégories autre part. Il y a deux endroits possibles. Soit des liens sous le bloc de description. Soit à la place de l’avatar (mais j’y reviendrais dans la partie code ^^). Essaie d’éviter aussi de faire des effets de ce genre pour ce genre de lien si important. Comme ce n’est pas instinctif on a tendance à ne pas faire attention alors que c’est toujours intéressant de voir d’un coup d’œil les sous forums.
Exemple pour illustrer Queel
Concernant le Queel, comme je te l’ai dit, sur mon pc il est sur le côté. Mais nous verrons la correction de ce bug dans la partie codage ^^ Concernant sa mise en forme graphique, c’est plutôt pas mal. Il y a juste deux petits points qui me dérangent. Le premier c’est le stéthoscope qui laisse apercevoir un bout du texte derrière. J’aurais plus vu une image de décor qu’un élément rappelant le contexte pour que ce soit plus agréable. Le texte derrière semble un peu pauvre sur ce fond blanc, une autre couleur dans le thème pourrait être sympa pour lui donner un peu plus de couleur. Enfin juste essayer de mieux espacer les trois blocs du centre pour qu’ils prennent plus toute la place disponible sur le QUEEL afin d’éviter qu’ils soient trop serrés.
Le fait d’avoir mis un fond transparent blanc est une bonne idée pour que le texte soit bien plus visible ^^
Exemple pour illustrer
Intérieur d’une sous catégorie
Je vais prendre comme exemple l’étage du bras qu’on retrouve dans le paradise night club. C’est une sous catégorie qui a d’autres sous forums et qui regroupe 3 sujets RPs. Mes prochaines remarques se baseront là-dessus bien que tu comprends que ça sera la même chose dans les autres ^^
Lorsqu’on arrive dans l’étage du bas, on voit exactement le même modèle que la page principale du forum. Mes remarques seront donc exactement les mêmes que dans la partie du dessus. Je rajouterais également que tu pourrais faire une bordure plus fine autour des images.
Enfin au niveau de la structure, répéter la même chose que la page principale va bien. Cependant d’un point de vue personnel j’aurais plus vu une séparation de chaque catégorie pour faire des blocs avec un peu d’espace. Cependant ce n’est qu’une idée en vrac, pas besoin de rentrer dans ces détails. Le plus important c’est surtout l’aspect général.
La deuxième chose qui dérange c’est tous les blocs du bas. Il faudrait arriver à les centrer pour que ça s’accorde et s’harmonise avec la structure des catégories (j’entends par là la largueur et le centrage). La couleur bleue ne va pas avec le reste non plus, je te conseille d’utiliser une texture ou une couleur unie plus neutre.
Enfin parlons des boutons supplémentaires (Annonce et Note). Pour Annonce je pense que l’icône se démarque bien des autres même si il est difficile de voir qu’il s’agit d’une annonce (même si je la trouve jolie). Enfin, l’icône utilisée pour les notes ne me semble pas adaptée du tout. Il faudrait peut être quelque chose qui ressemble plus à un post it ou bien une feuille, quelque chose d’assez discret.
Intérieur d’un sous forum
Là je suis dans les salles privées de l’étage du bas.
C’est vraiment une des parties du forum qui me semble la plus pauvre. En effet on dirait qu’il y a eu peu de travail dessus. Là au contraire tu restes minimaliste. On a l’impression que les sujets flottent dans le vide et ce n’est pas très agréable à regarder. Déjà l’icône du loup et des dents sont beaucoup trop grosses, ça donne de la hauteur à ces éléments et lorsqu’il y aura une dizaine de sujets, ça ne sera pas très agréable à dérouler. Je te conseille plus donc de faire des icônes plus petites et discrètes.
Ensuite j’ai un peu de mal à dire ce qui serait mieux pour améliorer cet élément en lui-même. Peut être faire un peu la même chose en reprenant le modèle des blocs (comme celui des derniers messages par exemple pour englober le sujet (avec une couleur d’arrière plan par exemple). Faire une bordure plus fine également et réduire la hauteur des sujets. Les centrer vers le milieu serait bien aussi (surtout si tu réduis la largeur). Car là ils sont du côté gauche, et ça fait trop vide du côté droit.
Exemple pour illustrer (je n'ai pas mis de fond mais juste te montrer le type de structure. Y a aussi quelques cafouillages au niveau du centrage et redimensionnement des éléments mais je n'ai pas cherché plus attentivement. Enfin je pense que tu comprends un peu le principe ^^)
Intérieur de message (en général)
Je suis ensuite entrée dans un message. La chose qui nous frappe le plus au début c’est la largeur qui est très grosse. Je peux bien comprendre que c’est plus agréable plus la lecture, le seul problème c’est que ça donne toujours une sensation de vide. De plus maintenant nous sommes plus habitués aux largueurs plus petites qui déjà permettent d’éviter trop de vide autour mais en plus je trouve ça plus agréable à dérouler. C’est une habitude que moi-même et d’autres joueurs avons et c’est peut être quelque chose qui gêne quand on voit une largeur de forum trop grande par rapport à ce qu’on a l’habitude de voir.
D’abord le titre du sujet. Là je te conseille de réduire la taille de l’écriture pour la rendre moins voyante. Ensuite elle aurait plus sa place dans un cadre comme le nom que tu as mis plus bas. En effet ça irait mieux à la place du nom/prénom du joueur, en plus discret et petit forcément mais cela donnerait toujours une indication temporelle au niveau du RP en question.
Ensuite pour le nom/prénom au début j’ai cru que c’était le titre du sujet. J’ai du mal à voir le nom/prénom du personnage ici alors que ça a moins d’importance qu’un titre. Tu devrais peut être placer cette information juste au-dessus de l’avatar, ça a plus sa place à cet endroit.
Concernant le bloc avatar et infos, je dois dire que le fait de le faire flotter dans le vide de cette manière est un peu bizarre. Tu pourrais plus essayer de le coller au cadre du corps du texte central en lui donnant un effet d’onglet. Ou sinon tu essaie de décorer le contour de cette zone profil afin que ça s’intègre mieux avec le reste et le décor. J’aime bien l’effet sur le cadre du bas (fonda et admin avec bouton profil) ça fait super sympa quoique un peu gros si il n’y a pas d’information dans ce petit bloc mais je ne pense pas que c’est dérangeant. Peut être faire un rond profil plus gros pour que ça tienne sur une seule ligne (tu peux te le permettre puisque ton bloc est gros sans faire un truc énorme non plus ^^)
Pour les couleurs de gris, c’est la même chose dite que dans mes premières remarques, ça ne colle pas vraiment avec le reste de forum, ça lui donne une sensation de vide et en plus le gris ici fait tristounet. Mais si tu changes les couleurs de ton forum, ça sera également le cas ici ^^
Message codé dans une annexe
J’aime bien la petite décoration au dessus du texte c’est joli *_*
A part cela, il n’y a pas vraiment de message codé à proprement parlé. Peut être essayer de faire les écritures des titres plus grosses, changer la couleur pour faire une bonne distinction entre titre et texte mais personnellement moi ça ne me dérange pas si les annexes ne sont pas codées ^^ Rajouter peut être des images si besoin pour illustrer et éviter un texte tout tristounet ^^
Profil de joueur
Là on voit que cette partie n’a pas été très travaillée. En effet, une personne qui arrive sur un profil voit quelque chose de très appauvri. L’image et le texte sont sur le côté gauche du forum. Il n’y a ni bordure ni cadre ce qui donne une impression spatiale de vide. En plus les liens de sujets et messages sont presque invisibles (gris sur gris ça ne se voit pas très bien). Je pense que tu devrais essayer d’adopter un modèle de fiche d’identité. Un cadre tout autour avec une couleur différente pour le fond et l’intérieur du bloc des informations. Essayer de centrer aussi tout le profil sur le milieu de la page ou bien, si tu le prolonges, essayer d’apporter des éléments pour faire comme une vraie carte d’identité, ça peut être chouette à développer et bien dans le thème du forum ville Oslo (puisqu’ils sont tous des citoyens)
Liens du menu de navigation
A cet endroit la plupart de mes suggestions ressemblent à ce que j’ai dit plus haut. J’insiste juste sur essayer de centrer et laisser de légères marges sur le côté de chaque éléments.
Récapitulatif
Je pense que le gros souci du design ça vient surtout sur la largeur du forum et la couleur grise au milieu qui ne s’accorde pas avec le reste. Il y a beaucoup de petits éléments qui, une fois peaufinés, pourront donner un style plus aéré et propre au forum. Cela repose donc sur une prise de risque minime (j’entends par là pas d’images trop complexes à mettre dans les fonds) et tenter des choses plus simples mais qui donnent un bel aspect principal (pas besoin de faire une œuvre d’art non plus). Eviter d’accumuler les éléments comme sur la bannière. Il vaut mieux quelques gros éléments bien choisis que plein de petites choses. Essayer d’éviter aussi d’utiliser des images en tant que fond de catégorie pour donner un effet un peu maladroit et déstructuré.
Ensuite, le deuxième point que l’on remarque, c’est que ton design ne nous donne pas l’impression d’être dans ce type de contexte malheureusement. Tout ce que j’ai dit vous permettra justement d’améliorer certaines choses tout en essayant de faire attention aux petits détails, ce qui pourra vous servir pour un prochain design. C’est difficile de donner des conseils à ce sujet car nous avons tous une vision différente des choses et les goûts et les couleurs ne se ressemblent pas. Le seul conseil que j’aurais à donner c’est justement ne pas hésiter à entraîner son œil en allant regarder d’autres forums pas pour copier mais s’en inspirer pour réussir à réaliser quelque chose de chouette. C’est ce que je fais personnellement et je trouve que ça m’a bien aidé à affûté mon œil pour voir ce qui va et ne va pas (même si certains conseils sont un peu personnels)
Pour mes suggestions et conseils, c’est assez orienté en fonction de mon propre niveau. Sur les forums que je t’ai proposé plus bas, tu vas bien du voir que certains utilisent des images avec des éléments pour remplir leurs catégories, titres alors que je te conseillais d’éviter cette pratique. C’est juste que je me mets à ta place et que je pense qu’il n’est pas évident pour ton graphiste de trouver l’image qui ne fait pas trop lourde ou trop vide pour coller avec les catégories ou tout autre élément du forum. Voilà pourquoi je recommande l’avancée par petits pas. D’abord on essaie de faire un forum simple mais harmonieux et avec la pratique il est possible d’améliorer son style et d’avoir un œil plus affûté pour trouver les éléments, les images qui sont suffisamment équilibrés pour bien s’harmoniser avec le reste du thème. A la vue de ton design, je pense que c’est le mieux à faire actuellement et puis avec les versions, on peut toujours faire de mieux en mieux et être de plus en plus audacieux ^^ Mais toute progression doit se faire petit à petit.
Si tu dis que ton forum attire et intéresse, alors avoir un design plus simple ne gênera pas les joueurs, du moment que celui-ci reste propre, épuré et qu’il représente le thème.
Proposition de type de design
Dans cette partie je vais te faire des propositions pour quelques éléments afin de voir un peu ce qui pourrait se faire. Attention, ça ne sera pas le thème de l’année 2016 xD Je pense que je ne suis pas assez « forte » en graphisme pour te donner des éléments digne d’une œuvre d’art. Mais je pense arriver à te donner des pistes pour remplacer tes éléments. A savoir que tout ce qui concerne le codage peut être laissé (mis à part la correction des bugs et la PA qu’on verra un peu plus en détail).
La première chose qu’il faut savoir pour construire un thème, c’est de faire un brainstorming. Mettre en avant ces idées, le type d’ambiance, des choix de couleurs… Je pense que c’est ce que vous avez fait au début mais là où ça a coincé c’est peut être qu’à vouloir mettre toutes vos idées pour être sûr que ça corresponde bien à vos deux mondes, on se retrouve dans une accumulation d’éléments et parfois de choses qui ne collent pas ensemble ^^
Bannière
Je vais commencer par parler de la bannière. Parce que cette image peut être très intéressante pour composer un thème adapté. Parfois quand on a un peu de mal on s’accroche à la bannière pour trouver des couleurs correspondantes afin de faire un design qui s’harmonise avec celle-ci. Il existe en plus des outils très intéressants facilitant le choix des couleurs. J’ai nommé Adobe Kuler et ce site là : http://toolki.com/fr/image-palette/
Tu mets ta bannière et paf ça fait des chocapics ! (hem nan plus sérieusement x_x). Ca te trouve une série de couleurs que tu peux utiliser pour les différents éléments de ton forum. A toi de faire des tests, sachant que les couleurs qu’on te propose ne passent pas partout. J’entends par là que sur les 5 couleurs proposées, toutes ne pourront pas faire un fond. Il faut reprendre une couleur qui se retrouve beaucoup dans la bannière. En plus sur les 5 couleurs proposées il y en a qui sont utilisées pour les titres, les textes et les liens.
Ensuite au niveau de la bannière en elle-même je pense que le plus immersif pour ton forum c’est une bannière background (donc qui va prendre tout l’espace et ne sera pas coincé dans un petit cadre à l’intérieur du corps du forum. En voici des exemples :
http://raging-oceans.forumactif.org/ / http://humanitas.maguilde.net/ / http://rhansidor.forumactif.org/login
Comme tu peux le voir ça prend une bonne partie de l’écran et ça permet de donner un meilleur aspect, plus évasif, ce qui irait très bien avec le contraste des deux « camps ». Maintenant, comme tu peux le voir sur l’exemple 2, si une résolution est trop grande, on peut voir les bords qui se répètent si on décide de faire une répétition de la bannière. Pour éviter que cela se produise, tu peux mettre un background-size cover qui redimensionnera la bannière sans la déformer ou plus simple, tu te fixes une dimension arrêtée pour ta bannière de fond et tu travailles les bords pour donner un effet d’incrustation (du flou par exemple sur les bords).
Ensuite au niveau de l’image en question, je pense que tu peux tenter deux choses. Soit tu mets une image de ville avec deux personnages totalement opposés (un acteur qui joue un médecin d’un côté et un vampire plus malveillant de l’autre côté) tout en essayant de trouver des teintes pour les différencier mais très légèrement (une ville grise, une lueur bleue autour du médecin, une rouge autour du vampire) et ensuite mettre une typo un peu dans le même style que je t’ai évoqué plus haut. La deuxième idée que je peux proposer, c’est de mettre deux cadres différents. Un hôpital d’un côté, un endroit assez…rouge et mystérieux et qui rappelle l’ambiance de ton club de nuit de l’autre côté. Avec des teintes qui peuvent contraster (toujours avec des personnages mis en avant car c’est ce qui passe bien pour illustrer le contraste entre les deux lieux). Sur cette version y a même possibilité de rajouter le nom de chaque structure mais en discret vers le bas. Pour montrer la différence, on peut tirer un trait en diagonale qui sépare les deux « zones » montrant ainsi la différence des lieux.
Le fond du forum
Là tout dépend du choix de la bannière. Si tu mets une ville grisée avec deux protagonistes par exemple il faudrait essayer de rester dans des tons neutres derrière pour rappeler la bannière mais sans le contraste bleu/rouge (qu’on pourrait retrouver sur la PA par exemple).
Par contre si tu mets une bannière avec deux couleurs qui contrastent y a possibilité de faire une sorte de fond bichromé pour rappeler ces couleurs. Un rouge d’un côté, un bleu de l’autre côté (mais en restant très discret, pas besoin de mettre des couleurs flashys). N’hésite pas à mettre aussi une texture sur la couleur, ça permet de donner un peu de relief au fond mais il faut que ça reste discret. Tu peux même pousser plus loin là en mettant des éléments pour chaque « monde ». Par exemple un petit bloc en fixe de part et d’autre, un peu designé et avec une forme décorative propre à chaque thème autour et avec des infos concernant uniquement cette partie en question (des liens de sujets, des rumeurs, des intrigues…)
La PA
Là aussi tout dépendra de ce qui est choisi ou si tu t’intéresses plus à un style qu’un autre. Sachant qu’il faut éviter l’accumulation d’éléments ou savoir trancher pour avoir un bon équilibrage ce qui n’est pas évident du tout. A la forme et aux éléments trouvés sur ta PA, je pense qu’une sorte d’effet de tableau d’affichage neutre pourrait être pas mal. Ca se passe dans une ville quand même donc donner une forme de ce genre donnerait un effet plus neutre entre les deux « mondes » pour faire un rappel sur la ville. Je ne te conseille pas d’utiliser des images pour tes blocs, du moins pas de cette façon. Une texture, un fond serait bien plus adapté pour chaque bloc et des infos qui se voient directement sans qu’on ait besoin de survoler les blocs. Je ne mettrais pas non plus les images des endroits jouables comme ça. Si tu n’apportes aucune info dedans, ce n’est pas vraiment nécessaire de les mettre. A la limite tu peux toujours tenter un cadre rectangulaire avec chaque lieu et les infos du moment (si y a des intrigues ou des trucs comme ça à l’intérieur) pour bien montrer ce qui se passe aussi bien dans la ville, dans l’hôpital que dans la boîte de nuit (en utilisant du jquery pour l’effet). Aussi, par exemple ce style là est sympa pour les blocs que tu as http://alonetogether.forumactif.org/ . Enfin pour moi je verrais plus quelque chose avec des éléments aérés sans pour autant prendre trop de place et sans être kishé l’un sur l’autre non plus.
Ensuite la deuxième idée est de faire une PA avec des blocs rouges d’un côté, des blocs bleus de l’autre et un bloc gris (pour le contexte au centre). Pourquoi pas rajouter quelques icônes vectorisées (petites) rappelant des éléments du forum, très discrètement, dans chaque titre (croix rouge, symbole de la médecine, masque en forme de loup, seringue, symbole de l’anarchie…)
Menu de navigation
Forcément si tu fais une bannière en fond, difficile de garder ton menu en l’état actuel. Soit tu peux le poser dans une bande en haut du forum, soit tu le mets sous la bannière.
Le corps des catégories
Ici je pense qu’il y a moyen de faire quelque chose d’intéressant au niveau des différentes zones. Surtout pour la séparation et le contraste des zones entre ville, hôpital et club de nuit. Je t’invite à regarder par ici : http://www.arcadia-forum.com/forum
Comme tu peux le voir le fond de chaque titre de catégorie a une couleur différente. C’est normal car il s’agit d’une image. Tu peux donc créer des images différentes pour ces lieux avec une couleur qui irait bien avec l’ambiance qui s’en dégage. Par contre si tu fais un truc du style il faut harmoniser aussi les couleurs à l’intérieur pour ne pas avoir quelque chose de vraiment trop tiré dans tous les sens.
L’autre idée serait de faire des titres simples, avec une texture ordinaire mais de rajouter un élément qui pourrait rappeler chaque zone. Une silhouette de ville pour la ville, un stéthoscope pour l’hôpital et pourquoi pas un loup pour le club de nuit. Attention, si tu choisis ce type d’images il faut que la qualité soit la même. Donc des images PNG avec transparence. Les plus propres sont quand même les vectorisées mais tu ne peux pas par exemple mettre une image photo pour une catégorie et une image vectorisée pour une autre, sinon ça ne s’harmonise pas très bien.
Pour la structure et tout, mis à part ce que je t’ai proposé comme modifications plus haut il n’y a pas besoin non plus de rentrer à fond dans les détails, juste éviter un fond comme actuellement et pour les couleurs, tout dépendra du type de bannière.
Le queel
La structure du QUEEL est pas mal (après quelques modifs) mais je pense qu’il faudrait revoir juste les images utilisées. Ici aussi je te conseille de placer une ville (des buildings par exemple) qui peut faire pas mal et bien coller avec l’idée de « population » de ceux qui parcourent le forum. Pour le rond, je verrais plus une image qui s’harmonise avec l’image de fond du QUEEL mais surtout pas un élément ou objet agrandi. Du moins ici ça ne fait pas très bien.
Les icônes de réponse
Difficile d’avoir des idées sur des pitits boutons comme ça
Moi je te conseillerais de garder une forme ronde car ça fait plutôt pas mal avec tes catégories mais essayer de les rendre moins grosses avec un petit « New » écrit en majuscules dessus et débordant du rond. Là je t’avoue que je n’ai pas trop d’idées à te proposer qui pourrait bien coller avec le reste mais je pense que c’est un élément qui ne devrait pas avoir trop « d’artifices » (trucs flashy, forme trop complexe, carré rempli d’une image…)
Le vrac
Faire une sorte de fiche d’identité pour les profils (donc designée). Je ne développerais pas cette partie étant donné que je l’ai fait plus haut.
Faire quelque chose de bien plus harmonieux et structuré au niveau de l’intérieur d’un sous forum (quand on arrive dans la partie où il y a les différents RPs). Le souci actuellement de cette zone c’est que ça semble très vide à cause du gris, des espaces, des icônes qui sont très grosses. Moi je verrais plus quelque chose de cadré avec des traits de séparation plus fins et une couleur de fond pour vraiment se démarquer du corps du forum.
Récapitulatif
Difficile de faire un design correct en mélangeant deux genres ^^ Dans ma partie de proposition d’éléments, j’ai fait des suggestions sur les thèmes qu’on peut retrouver mais sans pour autant tomber dans l’exagération. Le plus gros du travail se joue dans le haut du forum, c’est-à-dire bannière et PA même si chaque élément a son importance pour éviter les incohérences. Le reste, c’est plutôt des petits détails supplémentaires à rajouter à droite à gauche pour permettre une bonne visibilité, des blocs aérés mais pas trop vides non plus. Il faut bien penser à fouiner partout et ne laisser aucune zone non traitée. On peut avoir un très bel aperçu d’une première page mais si quand on arrive dans une catégorie ou une page ça fait vide alors ça fait un effet bizarre ^^ (c’est comme ouvrir une jolie boîte décorée de chocolat et de tomber sur une boîte avec 2-3 chocolats qui se battent en duel xD
Valà pour cette partie 2. J’espère que ça te convient, que ça va te donner des pistes de réflexion à toi et ton graphiste. Parfois je parle à l’impératif dans mes phrases mais il ne faut pas voir ça comme des ordres. Je me fais la réflexion en même temps et en plus de mon côté j’ai également fait les modifs grâce à l’inspecteur, ce qui aide beaucoup pour te donner une meilleure idée. Je ne pense pas que je suis la meilleure en graphisme mais j’espère que ça te permettra d’apporter des petites modifications pour rendre ce thème plus clair et épuré. Je pense aussi qu’il ne faut pas non plus chercher à tout prix à faire en sorte que tous les éléments s’accordent avec les deux thèmes. Si déjà il y a un travail sur la PA, le fond et la bannière alors là ça permet d’identifier bien rapidement le thème. Effectivement sur ton thème actuel on peut dire que les petits éléments de la bannière donnent une idée des thèmes du forum mais je pense que ce qui perturbe le plus dans l’identification, c’est les deux planètes de la bannière ainsi que le fond étoilé.Dans la prochaine partie on s’occupera donc du codage. Comme tu as pu le voir je ne me suis pas encore attardée sur certains éléments (même si j’ai quand même parlé de redimensionnement, positionnement et couleurs à changer). Mais dans la prochaine partie on verra vraiment les petits bugs et ce qui est inesthétique dans les éléments codés. N’hésite pas à me poser des questions si des choses ne te paraissent pas claires dans ma façon de t’exposer les éléments. Ou si par exemple tu veux plus de précisions, plus de détails, plus d’exemples sur une partie en particulier dans tout ce que j’ai écrit depuis le début, n’hésite pas à me solliciter, j’y répondrais avec grand plaisir ^^