Discussions sur le design de Zestedesavoir

Parce que c'est important

a marqué ce sujet comme résolu.

Bonjour à tous,

Je ne poste pas hyper souvent sur zestedesavoir (un peu par manque de temps) mais je suis pas mal ce qui s'y passe. Je suis dev (plutôt orienté front même si je maîtrise aussi le back) et j'avais notamment un peu contribué à la ZEP-04 avec Sandhose. Ça fait un petit moment que je me suis fait une petite réflexion à propos du front sur zeste et je propose ce sujet pour avoir un petit débat sur ce sujet. Ce qui suit pourrait tout à fait faire l'objet d'une ZEP mais je préfère prendre un poil la température et si la solution que j'aimerais proposer a l'air bonne où complètement pourrie.

Je vais dans la suite proposer une série d'idées, certaines seront plus concrète que d'autre mais c'est vraiment pour lancer le débat et en discuter donc ne vous attardez pas forcément maintenant sur certaines idées plus concrètes, elles sont là uniquement pour illustrer l'idée.

Posons la problématique

Premièrement il me semble assez clair qu'il y a un manque de dev front et plus généralement de graphiste, designer ou tout autre terme en lien, on va dire, avec la mise en page, la présentation, etc… Cette situation risque bien, malgré tout, de durer et de ne pas trop se résorber toute seule.

Ensuite, en prenant en compte les débats houleux qu'il y a eu sur ces sujets notamment (Zds est-il vraiment un site pour les débutants ?, Aider à naviguer parmi les contenus,Auteurs, qu'est-ce qui vous motive(rait) ?) ces derniers temps, j'ai l'impression (peut-être que c'est faux, hein) qu'une partie d'un grand nombre de ces problèmes pourraient être résolus ou, tout du moins, améliorés avec une meilleure mise en page, avec une meilleure éditorialisation du contenu. Bref, je pense qu'en faisant un gros travail sur la présentation non pas des cours eux-mêmes mais de la façon dont ils sont organisés, présentés, on pourrait faire beaucoup.

Un dernier points encore. Il y a actuellement une grande quantités de ZEPs très cool avec des idées de con-feature très intéressantes mais qui, souvent, manquent (surtout si le design n'est pas la partie la plus essentielle de la ZEP) d'idée et de développement front propre. Donc on se retrouve avec des ZEPs très intéressantes mais qui souvent sont un peu mal intégrées.

A propos du design d'Alex-D

Alors tout d'abords, attention ! Je me rend bien compte que cette partie est à prendre avec des pincettes et je vais essayer au mieux de bien expliquer ce que je ressent !

Le design proposé au tout départ par Alex-D est, entendons-nous, très bien pensé, bien développé, etc. C'est de la belle facture, c'est propre, c'est original mais ce n'est pas un design facile à faire évoluer ! Et encore moins sans son concepteur qui a un peu pris ses distances avec le projet. C'est là bien le point. Et je vais aller plus loin dans l'analyse.

Je trouve (avis tout à fait personnel) que le layout général proposé par Alex-D marche HYPER bien (je met en gras majuscule parce que je le pense vraiment) avec toutes les pages de types contenus : articles, tutos, forum et bientôt tribune libre. C'est bien intégré, c'est très bien rendu sur les différentes tailles d'écrans et c'est extrêmement agréable à lire. Et c'est très bien car c'est le cœur du métier de zeste. Par contre, et j'en veux pour preuve le développement de la nouvelle page d'accueil qui a complètement divergé de ce layout, ça me semble moins pertinent dans le cas de présentation de contenu, de liste de trucs, de paramètres, bref dans le cas de pas mal d'autre page et aussi dans la cas de pas mal de ZEPs qui, justement, ne prendrons pas place dans ces pages-contenus.

Il n'y a pas de grille, pas de bloc standard pour présenter certaines infos, pas tout les widgets et éléments graphiques qu'on aimerait pouvoir utiliser. Alors si on avait plusieurs devs-front bien opérationnel on pourrait passer dessus et refaire à la main des éléments dès qu'on en aurait besoin. Mais ce n'est pas le cas et j'ai l'impression que ça freine pas mal de trucs qui pourraient aller plus vite.

Une première proposition

Donc l'idée serait de créer une ZEP dont le seul but serait de concevoir toute une série d'éléments standards, de repenser les pages non-contenu et de définir un cadre graphique facile à utiliser (donc bien documenté) pour les non-devs-front. Et ce ne serait pas du tout de transformer toutes les pages en une fois. Plutôt de définir ça puis, en sautant sur une ZEP qui arrive en phase de dev, d'implémenter la ZEP (je pensais notamment à la ZEP de la page de profil qui prévoit de tout refaire sur la page de profil) avec ce nouveau système puis très progressivement de migrer les autres pages.

Avant de terminer et de lancer le débat une petite précision : par widgets je n'entend pas seulement des boutons et des blocs. Il s'agirait vraiment de penser la structure visuelle, en s'inspirant de la page d'accueil, du site, mais pas que et par forcément. Avec des larges bloc-titres qui permettrait de présenter un domaine de contenu (précisé dans la ZEP-25), bien définir l'affichage standards d'un contenu, d'un sujet, d'un domaine, d'un membre, préparer différents bouton action, bouton pour de l'aide, etc. Bref, proposer un ensemble de classes CSS avec structure que les devs back n'auront qu'à positionner dans une grille.

Voilà. A vous les studios:)

J'ai un peu peur qu'une ZEP soit un peu lourde à concevoir et/ou au démarrage.

Il faut vraiment (comme tu le dis) s'appuyer sur un refactor en cours (la page de profil c'est une super bonne idée !) et "penser" réutilisable en fonction des besoins.

C'est comme ça qu'on avance bien : un besoin <-> une implémentation <-> une bonne doc.

Et éventuellement au prochain besoin s'il est assez proche, on rend le composant en question un peu plus générique qu'il ne l'était.

Donc à fond pour l'idée, ça me paraît très bon, le seul danger que je vois c'est de s'enfermer dans une phase de spécification des composants pénible, démotivante et trop abstraite, là où il vaudrait mieux commencer simple, et avancer vite.

Donc oui pour l'idée, non pour la ZEP, oui pour la doc à destination des Dev back-end (et oui pour le développement main dans la main avec ces devs) :)

Super initiative.

+6 -0

@La source : Merci. Effectivement je vois qu'il n'y a pas plus que ça de réaction. C'est juste pour prendre la température et voir aussi avec les autres devs fronts (sandhose ou situfen).

@Javier : Oui je vois tout à fait ce que tu veux dire. Par contre je pense qu'en dehors d'une ZEP précise on doit pouvoir (toute la communauté) préparer un skin général qui précise un peu comment on veut organiser ces "nouvelles pages".

Par exemple si on prends le layout de la page d'accueil (le seul qui soit différent des autres pour l'instant) on a choisit de mettre une taille maximum fixe avec une série de breakpoints. Pour moi ça me semble la meilleure solution mais est-ce que ça convient vraiment à tout le monde. Et si on doit rediscuter de ça à CHAQUE ZEP qui demande un peu d'implé front vous aller dégouter les devs front.

Je ne pense pas qu'il faille rediscuter de ça à chaque ZEP, je pense simplement qu'il faut compléter un document de guidelines au fil de l'eau. Et ne (presque) pas en discuter en réalité.

Ou alors en discuter une fois qu'on aura tout plein de petits composants, tab-bars, boutons, ajax-combobox, etc.

En gros : une fois qu'on a avancé, et qu'on a vu à quel point c'était utile et intéressant sur des petits trucs simples, on établit un consensus pour les trucs complexes.

Si on commence de brut en blanc à préparer un skin général je crains qu'on ne reparte pour 6 mois de discussions comme pour la page d'accueil (et avec des gens qui vont dire a posteriori "ah mais attends je réagis un peu tard mais…").

Je pense (mais franchement j'peux me tromper) qu'il vaut démarrer simple, sur des petits bouts d'interfaces simples pour que :

  • ça débloque des ZEP
  • on voit comment se passe la collaboration
  • les développeurs back voient (concrètement) l'intérêt, même si j'pense que c'est déjà le cas
  • que le fameux skin général se dégage presque empiriquement, plutôt qu'après des tonnes de discussions

Bref, tu vois l'idée, d'expérience, dans un projet communautaire les trucs qui réussissent bien c'est les trucs où "on se lance et on voit, moi, j'suis chaud pour le faire avancer". Plus on tergiverse, plus c'est long et pénible pour tout le monde.

+2 -0

Ouais je vois ce que tu veux dire et effectivement ça pourrait être pas mal. Même si je reste convaincu que ce serait bien de discuter des très grandes lignes d'un nouveau layout général tous ensemble et en amont.

Genre :

  • Taille fixe maximum ou design adaptatif total;
  • Dynamise-t-on la mise en page avec des bloc large et coloré (partie haute de la page d'accueil) ou non;

D'autre personne ont un avis là-dessus ?

Personnellement, je suis aussi pour un débat sur le layout général (comme par exemple "la mise en page avec des bloc large et coloré") mais je pense comme Javier qu'il faut faire attention à ne pas perdre trop de temps si les débats n'avancent plus.

De plus, je rajouterai qu'il y a déjà des éléments réutilisables (comme les boutons ou l'affichage d'un membre dont Abdelazer parlait dans le sujet principal) bien qu'ils ne soient pas documenté pour la majorité ! Donc avant de bosser sur un truc, regardez s'il n'est pas déjà présent dans le code (cela n'empêche pas bien sûr de l'améliorer ;) ) !

+0 -0

Personnellement, je suis aussi pour un débat sur le layout général […] mais je pense comme Javier qu'il faut faire attention à ne pas perdre trop de temps si les débats n'avancent plus.
Situphen

Je suis tout à fait d'accord et c'était un peu le but de ce topic. Je ne pense pas qu'il faille tout décider en une fois mais préciser un visuel général, suffisamment extensible et adaptable, nativement responsive.

Il faudrait dans ce cas au moins faire une liste de ce qui existe @Situphen ;)
gustavi

Effectivement. Ce serait génial que toi ou sandhose nous fasse un petit résumé de ce qui est standard et ce qui l'est à peu près.

@polien : j'avais aussi pensé, au début, à l'idée d'attribuer à chaque domaine une couleur et de designer les bloc article, tutoriel, domaine dans cette couleur. Un peu à la manière d'un projet non-officiel pour wikipedia : www.wikipediaredefined.com et plus particulièrement cette image.

Wikipedia Redesign

Après vu que zeste a déjà une couleur (le bleu, hein !) faudrait voir la faisabilité. Donc pourquoi pas. Et c'est typiquement des questions de ce genre qu'il faut débattre en dehors d'une ZEP précise.

@Abdelazer : Visiblement les gens ne semble pas être tout à fait d'accord avec ma proposition :P , donc en effet c'est à discuter. Après on est pas obligé d'utiliser du bleu pour les catégories, la palette de couleur restante est suffisante pour couvrir toutes les catégories.

Oui effectivement, parce que sur la maquette que tu proposes ce n'est ni très clair, ni très proche du design de base de ZDS (sans jugement ;) hein).

L'idée des couleurs serait vraiment de "séparer" les grands domaines définis dans la ZEP-25 (à savoir : Informatique, Sciences de la nature, Sciences Humaines et Sociales, Autre) par des couleurs. Un(e) tutoriel, tribune libre, catégorie de forum (ou pas), article traitant d'informatique serait dans un bloc "article" (par exemple) teinté de (coloré de , avec un fond, bref) rouge.

De la même manière, en allant sur l'article en question. On pourrait imaginer un petit bandeau en haut (comme sur la page d'accueil mais en moins haut) en rouge avec le titre de l'article. Sur la page des tutos on aurait 4 gros "boutons/liens/encards" (en plus des derniers tutos, tutos mis à la unes, …) qui serait tous de la couleur du domaine et qui pointeraient vers la page tuto du domaine, elle aussi avec un bandeau de couleur en haut, etc…

Je prétends pas avoir tout résolu mais ça peut être une aide pour la recherche, la catégorisation, l'éditorialisation et la présentation des contenus.

Bref, de manière générale on voit qu'il y a quand même à discuter (malgré les deux premiers messages) et donc vu l’intérêt (en pouce vert) du premier message j'invite tout le monde à donner son avis sur les dernières propositions.

Pour la question des différentes couleurs, je suis du même avis que Blackline : si c'est discret, bien intégré, alors ça peut être bien sympa et utile. Sinon, ça risque d'être horriblement reboutant. Je ne suis pas expert en la matière, mais je pense qu'un bon moyen de voir ce système de couleurs serait de pouvoir avoir affaire à une première maquette. Serait-ce possible ?

Sinon, je ne peux qu'approuver l'idée de reprendre les ZEPs au fur et à mesure. En ce moment, plusieurs ZEPs ont été remontées et/ou sont en cours de développement, ça pourrait être l'occasion.

Personnellement, j'ai vue et admirer le boulot fait pars cerveau à tout les niveaux. En sommes il y a 3 couleurs de site, pour montrer au visiteur sur quel borne du site est-il : Débutant, Intermediaire, Avancé. Plus les couleurs sont chaudes plus le niveau requiert d'avoir lu les precedents articles de bas niveaux.

Dans cet esprit on peut imaginer des miniatures colorés d'une certaine teinte plutôt que d'une autre ? Cela peut poser quelques problèmes je l'entend, donc pourquoi pas un coin-d'angle coloré par exemple ?

J'dis ça, c'est juste pour montrer les autres possibilités.

+1 -0

Ça peut être une idée, oui. Après, le post de départ d'Abdelazer propose pas mal de choses, il faudrait peut-être créer un sujet dédié pour y parler de ces différentes couleurs.

Concernant le design de ZdS en général, et ce qui est proposé, je plussoie ce qui a déjà été évoqué plus haut : partir sur une ZEP, et l'implémenter comme voulu. Ça permettra déjà de donner un ordre d'idée. Et puis les ZEPs qui auraient bien besoin d'un coup de pouce dans ce sens, elles ne manquent pas : la ZEP-19 (une page de requête pour les tutos), la ZEP-36 (nouvelle page de profil) pour ne citer qu'elles. Il y a aussi la ZEP-08 qui demande un gros travail au niveau du front.

Bref, tu vois l'idée, d'expérience, dans un projet communautaire les trucs qui réussissent bien c'est les trucs où "on se lance et on voit, moi, j'suis chaud pour le faire avancer". Plus on tergiverse, plus c'est long et pénible pour tout le monde.

Javier a tout a fait raison. Je pense vraiment qu'il faut se lancer et voir ce que ça donne.

Hello tout le monde.

Après 2 bons mois d'absence (je m'en excuse mais j'étais sur Bruxelles pendant les fêtes et là je viens de rentrer d'un mois en Inde) je reviens un peu sortir ce sujet de la cave ;)

Donc après réflexion et lecture des différents avis, je me rend compte qu'il faut effectivement plutôt essayer d'avancer sur une page en particulier. Et donc j'ai préparé une petite maquette avec une idée pour mieux présenter la page des tutoriels. Peut-être qu'il faudrait faire une ZEP mais bon si un modo passe par là et juge que c'est mieux d'ouvrir un nouveau sujet je le ferais; en attendant, je continue là !

Donc l'idée, en reprenant un peu le post de base, c'est d'améliorer la lecture, la recherche et l'exploration des différents tutos en amenant une sorte d'éditorialisation. Je me suis basé sur la ZEP-25 qui est en cours de dév pour mettre en place une navigation par catégorie. Au niveau visuel j'ai pas mal repris des éléments de la page d'accueil. C'est bien sûr un premier jet.

Page d'accueil des tutos

Page d'accueil des tutos

  • J'ai modifié (pas encore entièrement) le fil d'ariane de manière à faire en sorte que ça rende bien avec directement un bloc bleu. Ce serait un nouvel élément qui permettrait de commencer les pages avec un bloc bleu (la recherche devrait bien sûr réapparaître);
  • Je propose des tutoriels mis en avant, peut-être moins volatils que sur la page d'accueil, qui permettent de montrer quelques contenus d'accroches;
  • Ensuite on a les derniers tutoriels avec un bouton pour créer un nouveau tuto et un pour aider les auteurs;
  • J'ai remis une barre de recherche mais cette dernière ne devrait faire des recherches que sur les tutos;
  • Enfin, la liste des domaines de savoir. Ces boutons mènent à la page suivante.
Page d'un domaine de tutos

Page d'un domaine de tutos

Si on clique sur l'un des domaines on arrive sur la page du domaine (ici le domaine informatique).

  • Un petit texte + icône nous accueil et précise le champ de recherche;
  • A nouveau, 2 tutos à la unes : valeurs sûres du domaine de savoir;
  • Les derniers tutos du domaines;
  • Les tutoriels les plus vu du domaines;
  • Les différentes catégories du domaine.

Tout les liens Tous les tutoriels présents sur ces deux pages ainsi que les boutons catégories d'un domaine (ex. Site web) mènent à une troisième page qui ressemble à la page actuelle mais centrée et sans la sidebar de gauche. Cette page serait automatiquement triées : ex. si on clique sur Tous les tutoriels dans le bloc tutoriels les plus lus en étant dans la page domaine informatique on accède à cette page mais qui n'affiche que les tutos d'informatique triés par vues.

Voilà. Des avis sur cette proposition et cette mise en page ?

Il y a des choses vraiment intéressante (j'aime beaucoup le 3ème screen) :)

Si jamais tu es doué en frontend j'ai besoin d'un tout petit coup de main pour terminer la ZEP-25 (c'est relativement simple) !

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte