J'aimerais vraiment qu'on déplace le sujet des noms des groupes au sujet "contexte" plutôt que dans le sujet "design" ^^.
Oui, parce que je ne vais pas en parler du tout dans ce qui suit...
Bonjour les p'tits chous !
Aujourd'hui, je veux aborder le thème ô combien compliqué de l'aspect général du forum : header ; page d'accueil ; catégories ; qui est en ligne... Comme vous l'aurez deviné, ça va être une avalanche d'exemples en tout genre que j'ai bien aimé au terme de deux semaines de chasse sur internet. Tout n'est peut-être pas bon à prendre, mais je suis sûre que l'on saura opéré un tri ingénieux. Par ailleurs, sachez garder à l'esprit que je vais souvent vous montrer des « effets » sympa et que ce n'est pas l'ensemble de l'exemple que je veux adopter. Donc tout ce qui est couleur, taille des polices, soulignements, etc, ne sont pas toujours à propos. Enfin, comme d'habitude, ce qui m'intéresse de vous montrer ici, ce sont les possibilités du codage que je me mets en devoir de pouvoir réaliser et non un design à proprement parler. Évidemment, le tout est lié. Mais je ne suis pas assez compétente pour réussir à mener les deux de front. Sur ce, bienvenue au pays merveilleux du CSS, du JS et autres cochonneries du même acabit !
Barre de navigation :
Exemple : 1... et ce sera le seul →
Ested→ muhu ! ^^
Avoir une barre de navigation tout en haut permet de dégager le champ pour le reste du forum et du design. Comparé à Ested, j'aimerais la centrée davantage et changer de police, mais garder l'effet « sobre » qui s'en dégage. Autre méga avantage ? La barre nous suit au fur et à mesure du défilement ! Plus besoin de revenir en haut de la page pour cliquer sur « MP » ou « Profil ». Classe suprême ? On peut la mettre légèrement en transparence pour qu'elle soit moins mastoque et se fonde mieux dans le design ^^.
Header/bannière :
Je trouve le concept de « bannières » aléatoire carrément épique.
A chaque actualisation (chargement de page du forum), la bannière change. On peut très bien imaginer qu'elle ne tourne que sur trois images différentes. Ce serait à la fois dynamique, original, moderne. Et on pourra faire pleurer le graphiste qui se lancera dans notre commande (moi sadique ? naaannn)
Personnellement, j'étais contre le fait d'utiliser une bannière en « fond » du forum, comme sur Ested. Je ne trouve pas ça très beau. En même temps, je trouverais bien que la « bannière » ou « header » s’intègre bien au fond du forum (mais là on touche à du graphisme et non à du codage).
Au niveau de la taille, puisqu'il y a des divergences à ce sujet, je dirais qu'il est nécessaire qu'elle soit assez importante mais autant que possible, qu'elle soit harmonieuse avec le reste du forum. Idéalement à mon sens, il faudrait qu'il prenne l'intégralité de l'écran (bordures comprises) lorsque l'on affiche la page, qu'on ne voit pas le début de la PA en bas.
Page d'accueil :
L'exemple fait par notre chère Edryn :
- Spoiler:
L'exemple redessiné :
- Spoiler:
En voici d'autres pour nous en inspirer :
- Spoiler:
- Spoiler:
- Spoiler:
Il y a moyen de supprimer le cadre de la PA et je me propose de le faire parce que le rendu est tout de même nettement plus aéré. Enfin, étant entendu qu'absolument TOUT est personnalisable à souhait. Mise en page de titres, hoover un peu partout, etc.
Catégories :
C'est clairement l'une des parties qui m'a le plus amusée donc je serais assez prolixe sur le sujet.
Exemple 1 : www→ très simple et très sobre
les plus :-un entête « votre 1ère catégorie » avec un effet ombré
-une signalisation du statut des messages en cercle (+ bonne idée design de choisir une couleur radicalement différente et complémentaire)
-des titres à cheval sur les rectangles
-un défilement interne du texte de description
-l'absence de « lignes de démarcation » (+ bonne idée design, ça change tout)
-
un bandeau qui permet d’apercevoir les sous-forumles moins :-c'est simple, peut-être trop
-des polices que je n'aime pas beaucoup
-un effet « ramassé »
Exemple 2 : www→ très simple, très sobre mais avec plus de punch
les plus :-
l'insertion d'une image à la droite dans le cadre des catégories-un texte inséré avec barre de défilement dans la catégorie
-des titres à cheval sur les rectangles
-l'absence de « lignes de démarcation » (+ bonne idée design, ça change tout)
les moins :-pas de bandeau cette fois, c'est trop classique
-pas de signalisation du statut des messages proposée
Exemple 3 :
www→ classique mais innovant
les plus :-
le texte en transparence sur une image-l'absence de « lignes de démarcation » (+ bonne idée design, ça change tout)
Note : quand les mêmes bons points existent, j'éviterais de les répéter à présent.
les moins :-ce n'est pas hyper lisible, il aurait fallu mettre une transparence plus prononcée
-dieu que ces titres sont laids !
Exemple 4 :www→ CSS powaaaa
Note : le « premier onglet 1 » correspond à ce qu'on voit sur le forum lorsqu'il s'affiche. Le « premier onglet 2 » est ce qu'on voit sur le forum lorsqu'on passe le curseur dessus. Le « deuxième onglet » est ce que l'on voit lorsque l'on clique dessus (si j'ai bien tout compris). Cet effet s'appelle un « hoover ». Soit il n'y a pas transition, soit c'est un fondu, soit c'est un défilement horizontal.
les plus :-
permet de dégager considérablement l'espace-
est très original-
très bel effet des titres « votre 1ère catégorie »les moins :-la présence d'image implique de devoir trouver des images pour chaque catégorie et ça, c'est déjà balèze pour un forum au design « réaliste » qui s'inscrit dans une époque qui n'existe pas, dans une ville qui existe.
-est ce que ce n'est pas un peu « trop » de CSS pour pas grand chose (en plus d'être horriblement compliqué à installer) ?
Exemple 5 : www→ juste pour le hoover !
les plus :-
l'insertion d'une image dans les catégories qui recouvre le texte et disparaît quand on passe le cuseur dessusles moins :-va-t-on trouver des images pour toutes les catégories ?
Exemple 6 : www→ juste pour le « hoover » titre ! (oui, j'aime quand ça bouge tout seul)
les plus :-
dynamique et très facile à faire !les moins :-la mise en page du titre est moche, mais ce n'est qu'un détail
En résumé : J'aime :
-les sous-forums en bandeau
-les titres à cheval sur le cadre des catégories
-le déplacement des titres en hoover
-les textes de description
-l'apparition des descriptions derrière une image en hoover
Je n'aime pas :
-devoir chercher des images
-et tout ce qui n'est pas mentionné au dessus ^^
Bonus :
-je veux garder la mise en page classique : signalisation du statut du message ; catégorie ; dernier message posté (mais donc supprimer le nombre de sujets et de messages contenus dans la catégorie)
-je veux supprimer les lignes de cadre
-je veux supprimer l'apparition systématique de la mention « modérateur » dans chaque sous-forum
Qui est en ligne :
Quelques exemples :
- Spoiler:
- Spoiler:
- Spoiler:
Note : mention spéciale pour le dernier <3.
Là encore, j'aurais tendance à vouloir m'orienter vers quelque chose d'assez simple et classique mais j'aime l'idée de survoler le nom d'un groupe pour qu'apparaisse sa définition.
Et parce que tout ce que je peux vous avoir proposé peut vous sembler nébuleux, ou que vous avez du mal à imaginer un rendu fini, voici un petit forum test en construction de quelqu'un qui travaille sur un thème différent en reprenant certains des éléments que je vous ai montré :
www. L'organisation des catégories, un QEEL personnalisé, une PA pas encore à jour mais bien organisée... y'a pas à dire, ça a un peu plus de gueule que mon pauvre forum test avec les paramètres de base de forumactif.
Et à présent, lachez-vous ! Et oui, je sais que je choisis précisément le moment où trois membres sont absents pour poster ça T.T . Mais c'est pas grave, ils diront ce qu'ils en pense à leur retour.