MISSION #12 - Repenser une partie du design des forums (maquette)

Hello !

Je propose une mission qui va consister à faire une maquette autour d’un des éléments d’un forum : catégories, affichage des sujets/messages, qui est en ligne, navigation etc. Chacun choisit ce qui l’inspire le plus, peu importe.  Il faut réarranger cet élément à sa façon et donc nous présenter la maquette (exemple de catégorie : https://2img.net/image.noelshack.com/fichiers/2015/34/1440362294-catnewsgif.gif  (par Gravity)) .  Pas besoin de savoir coder ou autre, juste du Photofiltre/Photoshop/Gimp…

L’objectif ? Discuter de remodelage des forums, tenter d’être original et aussi montrer à ceux qui ne codent pas et ne collaborent pas avec des codeurs les opportunités de cette démarche

En plus du rendu graphique, j’aimerais que vous nous parliez un peu de votre démarche en répondant aux quelques questions suivantes. Le but est de donner à chacun l’occasion de réfléchir à tous les détails, de voir les différentes approches et d’extraire des conseils et astuces pour faire de tels remodelages

- Qu’est-ce qui t’a poussé à choisir cet élément ? Pour répondre à quel besoin problème avez-vous modifié cet élément ? ?
- Quelles sont tes inspirations ?
- Pourquoi as-tu choisi de placer chacun des éléments de ta maquette à sa place particulière et pas à une autre ?
- Quelles sont les difficultés que tu as rencontrées et comment les-as tu surmontés ?
- Penses-tu que cette maquette est réalisable en termes de codage ? (la réponse ne doit pas forcément être « oui » alors ne te retiens pas si c’est « non » ou si tu ne sais pas, on verra bien)
- Pour résumer, selon toi, quels sont les éléments à garder en tête lorsqu’on modifie la structure d’un forum ?

( Si vous avez des idées de questions supplémentaires, dîtes-le moi et je rajouterai !)

N’hésitez pas à réagir aux différentes créations et commentaires. On est là pour avancer en groupe après tout  

Bon graph à tous !

Wow c'est hyper intéressant ça, surtout que je suis en train de faire une maquette pour mon prochain design...
Heuu comme question : pour répondre à quel besoin / problème avez-vous modifié cet élément ?
(ou alors c'est trop une question de designer... je sais pas ^^' )

Nop, c'est une bonne suggestion ! C'est plus clair que mon "pour quelles raisons ?" alors j'ai remplacé, merci !

Hello Neva-chou <3

En premier lieu, un super merci d'avoir parlé de (et lancé) cette mission! Si tu n'en avais pas touché mot sur la CB; je n'aurais même pas calé son existence, je suis tellement à la bourre sur le forum

Il semblerait donc que je m'apprête à inaugurer le tir avec ceci : https://nsa37.casimages.com/img/2015/08/31/150831070202595591.png (ce n'est pas vraiment une maquette dans le sens où je n'ai pas indiqué les éléments à coder etc... C'est juste une image de fond. La version codée est celle-ci : https://nsa37.casimages.com/img/2015/09/10/150910062811980164.png )

C'est un QEEL que les petits curieux peuvent voir codé sur mon forum dont je ne remets pas le lien ici, par pure flemme //j'assume.

J'ai choisi cet exemple pour deux raisons :
1/ C'était mon premier QEEL codé (Onyx, Nihil, je vous aime pour le coup de pouce <3)
2/ C'est un élément que je déteste coder dans les fora, parce qu'ils contiennent des élément importants, donc ils sont essentiels, MAIS en même temps ils sont souvent difficilement lisibles, et rejetés en bout de forum, et bien souvent ils "terminent" le design, donc sont la note de fin, donc à ne pas foirer! Autant je sur-adore les PA, autant les QEEL... alors que fondamentalement ce sont deux éléments qui ont un même but : contenir un grand nombre d'infos pratiques sur le forum.

C'est donc avec le trouillomètre à zéro que j'ai entrepris d'imaginer ce QEEL. Je me demandais quelles infos mettre dedans, tout bêtement. Sur un forum de RPG les dates d'anniv' me paraissent peu importantes, je les ai donc virées, en revanche il me semblait primordial d'avoir tous les groupes clairement affichés. Je tenais aussi aux mentions légales : mon forum est basé sur des jeux de rôle pré-existants, autant les faire figurer pour tous les petits curieux! De même, je ne voulais pas mettre les topsites sur la page d'accueil, parce que je déteste cette course au vote, mais en même temps je sais combien les topsites sont devenus une façon pratique de trouver des fora de RPG (moi-même, j'avoue, je zyeute régulièrement de ce côté là pour trouver un nouveau terrain de jeu lorsque j'en cherche un!)

Niveau inspiration... ma foi j'aime les choses plus graphées que codées, et le thème entier repose sur l'idée des nuages, sur quelque chose de très aérien, de très "clair" aussi (même si le thème est assez sombre, j'ai essayé de jouer autant que possible sur les points de lumière. Il ne me reste qu'à bosser le fond de page, sur les excellents conseils d'Hismé - il cache bien son côté bleu, le coquinou!)

La maquette est bien sûre réalisable (et réalisée xD ) en terme de codage, il n'y a rien de vraiment compliqué qui se cache là dessous ^^" (deux trois blocs de texte à positionner, tranquille quoi xD)

De façon globale, pour un design je dirais qu'il y a deux choses à avoir en tête : l'esthétique et la lisibilité. Il n'y a rien de pire que de voir des foras super beau mais dont les polices ne sont pas lisibles!) J'aime essayer de penser en terme de confort visuel autant que faire ce peut ^^"

Voilà =) (en espérant ne pas avoir répondu à côté de la plaque ^^")

C'est une super mission *___*

Je participe pas tout de suite, même si je suis en train de travailler sur une barre latérale sur le forum qui servirait de barre de navigation :) (enfin, je n'ai pas commencé, mais je compte commencer un jour )

Eha merci d'avoir partagé ta création :). J'aime bien ton QEEL, mais j'ai un peu de mal avec toutes ces barres d'overflow ><. Pour groupes et référencement, ça ne m'embête un peu mais pas trop   , mais les stat' je trouve ça moins pratique.

Je m'explique, imaginons ~... Je suis un gentil petit membre qui se promène (ouais ouais ça existe) et je veux voir si mes copains sont co sur le fow o/, je me retrouve face à ceci :

C'est dommage que la liste des membres connectés soit aussi vite coupée. Sur ton navigateur les barres de scroll sont plus fines, mais ce n'est pas le cas partout :s

Effectivement, c'est un peu galère de gérer "toutes les infos" à rentrer ><. Ma technique dans ce genre de cas c'est de me demander ce que moi je regarde en premier en général.

Par exemple les mentions légales je trouve que c'est une super idée de les afficher directement sur l'index, par contre je les aurais mises en dessous du QEEL, un peu dans ce genre là. (on se moque pas, j'ai fait dans l'inspecteur d'élément rapidos >>)
Du coup la zone "Mentions légales" dans le QEEL, je mettrais plutôt quelques petites stats sûrement.

Je veux pas du tout t'imposer une vision hein, juste apporter un éclairage différent.
Les avantages que j'y vois :
→ On peut lire les mentions légales / crédits sans scroller. En général j'ai tendance à jouer avec les scrolls, mais j'ai un peu de mal à me concentrer pour trouver un confort de lecture ><. Surtout que l'ancienne zone était vraiment pas très haute, et je scroll comme un bourrin en général, j'avais eu du mal à lire (Nihil le barbare).

→ La nouvelle zone stats (à la place des mentions légales) : Je trouve que c'est plus facile de lire (et plus tentant) ces informations, car elles ne font plus "un gros bloc".

→ La zone des connectés a plus de place pour afficher plein de monde \ o /

Bon voilà, c'était juste une proposition pour peut-être améliorer

C'est un petit détail, mais j'aime le fait que tu aies pris le temps d'écrire un petit title sympa ♥ (même chose pour les groupes, c'est toujours utile ^^)

Ho my ho my, cette mission est absolument génialissime *o*

Je suis souvent confrontée à des "règles" d'agencement de forums, où il faut que ça soit efficace, 100% optimisé pour prendre le moins de place possible et être le plus lisible etc... Du coup je ne me sens pas toujours libre dans les éléments de forums que je créé et j'ai du mal à me détacher de ce qui existe déjà.

Du coup je suis contente qu'il y ait une mission où je puisse me libérer de ça ! xD
Ce qui a donné naissance à ça > https://2img.net/image.noelshack.com/fichiers/2015/40/1443820392-mission-12.png que je vais expliquer ! Enfin tenter, il est déjà pas tôt et mon cerveau commence à en avoir un peu marre de l'écran >.> *raconte sa vie*

- Qu’est-ce qui t’a poussé à choisir cet élément ? Pour répondre à quel besoin problème avez-vous modifié cet élément ?
Pourquoi les forums ? Je sais pas, en fait je voulais faire une PA parce que c'est avec ça que j'ai le plus de mal, mais si on y réfléchit bien, je trouve que ce sont les forums qui offrent le moins de diversité en ce moment. Je les trouvais assez géométriques et très répétitifs alors je me suis demandée si on pouvait pas imaginer une autre forme, une autre manière de les rendre peut-être un peu moins systématiques.
Ça donne un résultat un peu déconstruit et j'en suis consciente, et je ne suis pas sûre qu'on puisse faire un forum avec cette forme répétée mais la forme verticale m'a intéressé !

- Quelles sont tes inspirations ?
Heuuuu, en ce moment je découvre le vectoriel, je pense pouvoir dire que ça a pas mal joué quand même xD Sinon le but était de créer une forme que je n'avais jamais vue, mais c'est impossible donc il doit bien y avoir une référence... Mais je l'ai oubliée o.o

- Pourquoi as-tu choisi de placer chacun des éléments de ta maquette à sa place particulière et pas à une autre ?
Comme dis plus tôt, je cherchais une structure un peu déconstruite mais tout de même lisible, donc j'ai volontairement laissé des zones libres ou vides, des typos qui dépassent, des cadres pas tout à fait centrés etc... Les éléments sont placés sans vraiment de lien, sauf lorsqu'ils semblent parler de la même idée (parce qu'on peut aller beaucoup plus loin dans le genre xD)

- Quelles sont les difficultés que tu as rencontrées et comment les-as tu surmontés ?
J'ai pas vraiment réfléchis en le faisant, la principale difficulté ayant été écartée dès le début (soit : pense ça comme un élément de forum et pas comme un délire bizarre, ma fille xD) Ha si à un moment c'était plus du tout assez compact, là ça donnait clairement un résultat pas probant du tout. Sinon, la couleur de la typo passerait pas sur un fond clair.

- Penses-tu que cette maquette est réalisable en termes de codage ?
J'ai jamais réussi à faire un truc impossible à coder encore, donc je dirais plutôt oui ! (même assez facilement, ce ne sont que des blocs et des images xD)

- Pour résumer, selon toi, quels sont les éléments à garder en tête lorsqu’on modifie la structure d’un forum ?
J'aurais tellement aimé répondre un truc classe, mais en fait je sais même pas, puisque j'essaye de m'affranchir justement de tout ce qu'il faut habituellement pour que ça marche. Si on me dit "il faut que ça soit compact", j'essaye l'inverse xD
Je dirais donc que ce qui prime vraiment à chaque fois pour moi c'est la lisibilité et la cohérence générale.

Et merci pour cette mission, elle est génial *w*

Coucou, je suis passée par là et puis je me suis dit "tiens, c'est une bonne démarche pour commencer à faire ta maquette de liste des sujets pour ton forum meuf, allez tu te lances"

Donc du coup, ce serait pour l'affichage de la liste des sujets, j'ai pensé à quelque chose de simple (comme toujours dans mes codages mdr) et qui fasse futuriste cependant. Un de mes amis a cru que j'allais faire des onglets à cause de mon schéma mais ce n'est rien de tout cela :')
https://www.zupimages.net/up/16/15/kzfz.png

1/ Tout simplement l'envie de coder mon forum de A à Z et puis l'envie de m'améliorer, personnellement, en parcourant la plupart des templates FA pour aider les autres à les utiliser. Du coup, mon besoin c'mon forum et celui de faire bien les choses

2/ Mes inspirations viennent sûrement de tout ce qui est SF. Dans les menus de certains jeux-vidéos se passant dans le futur, etc, il y a toujours ce genre d'affichage dynamisé par des formes géométriques diverses. Ici, des bordures sont arrondies, les sujets ont une forme de trapèze. De plus, comme j'ai pas mal utilisé le motif des triangles je trouvais que ça allait bien avec mes images qui reprennent ces idées graphiques.

Une petite idée ici (le menu pause de Ratchet et Clank 3 je crois) et là (le menu pause de Transistor)

3/ J'ai voulu placer la barre de navigations entre les forums de cette manière, car je la trouvais innovante puisque d'habitude elle se trouve toujours en haut, certains la supprime en bas. Sur le côté, je trouve que ça donne un aspect sympa. Je ne sais pas encore si je mettrais une valeur fixe et un overflow mais je pense pas que ce soit franchement pratique o/
De plus, il est rare que cette partie du forum soit codée bien souvent, ce que je trouve assez dommage car le membre y passe du temps et c'est toujours agréable d'avoir une mise en page sympa et de se dire que sa fonda' s'est cassée le cul pour rendre la navigation plaisante o/

Après, pour les sujets, j'ai expliqué la raison de cette forme qui vient de mes inspirations issues de jeux-vidéos. Je pense donc faire des effets de surbrillance au passage de la souris. Je ferais sûrement le même genre d'affichage pour la liste des membres pour pas que ça fasse un peu "Oui bonjour j'ai codé ça mais ça n'a rien à voir". Pour les profils individuels aussi peut-être ? (pour l'instant ces deux derniers sont des LS)

4/ Je les rencontrerais sûrement en codant o/

5/ Je pense que c'est absolument réalisable. Je sais comment faire des triangles alors il me suffira d'en faire aux extrémités et un rectangles au centre pour les sujets x)
Par contre la bordure grise en haut j'en sais rien. Faire une image serait bien plus simple je pense .
J'ai déjà codé la navigation des forums dans l'affichage des sujets, donc c'est amplement réalisable également :)

6/ Je pense qu'il faut se poser les question "Qu'est-ce qui est important ? Qu'est-ce qui est utile et ce qui l'est moins ? Est-ce que l'affichage est à la fois ergonomique et agréable pour l'oeil ? Sur quel type de forum on se trouve ? Si c'est un RPG, la lecture sera importante." et ainsi de suite.
D'ailleurs quand je vois des forums avec leurs catégories en onglets je pleure ._.

Du coup bon, voilà voilà. Peut-être que ça vous donnera des idées pour vos propres liste des sujets  Et puis merci pour le sujet, ça m'a permise d'innover en terme de codage