Demande d'avis de la communauté sur un travail étudiant

Bonjour,

Je m’appelle Mathias Moureaux, je suis formateur en web design pour plusieurs écoles des métiers du numériques, et je viens tout juste de m’inscrire sur FramaColibri.

A travers mes cours, j’essaie dés que possible de sensibiliser mes élèves à des alternatives au outils des GAFAM. Je travaille actuellement avec des étudiants sur un projet fictif de création d’un Design System pour Framasoft. Le travail attendu doit respecter et afficher les valeurs de l’association Framasoft, mais également moderniser et valoriser l’image de l’association.

En qualité de formateur, j’aimerais vous soumettre le travail de mes étudiants afin d’avoir un retour de votre communauté sur leur propositions.

Seriez vous d’accord pour que je vous transmette leur étude de cas ?

Merci d’avance pour votre retour,

Mathias Moureaux

1 « J'aime »

Bonjour,

Merci pour la proposition ! Il n’y a pas de souci pour prendre Framasoft comme cas d’études, et on est clairement très intéressé·es par la production de vos étudiants.

Si ce n’est pas déjà identifié dans le cadre de leur travail, notez que le plus compliqué dans le cadre de l’uniformisation de l’apparence des sites et services que nous proposons est que les services sont tous basés sur des logiciels différents que nous ne développons pas.

Également si jamais, notre page de référence sur notre charte graphique peut être intéressante :

(cc @MCGodwin qui sera peut-être aussi intéressée par le retour, et avec qui nous faisons certains travaux avec d’autres étudiants sur Framaspace)

1 « J'aime »

Merci beaucoup pour votre réponse et pour mes étudiants :smiling_face:
J’ai encore un cours avec eux le 20 janvier pour finaliser leur projet, je vous propose de vous envoyer leurs propositions (via un lien vers Figma) à cette date.

En attendant voici le résumé des instructions qu’ils ont reçu pour effectuer le travail.

La plateforme de logiciel libre Framasoft souhaite concevoir un design system utilisable pour l’ensemble de ses services, et fait appel à vous pour débuter une réflexion sur ce projet. Dans un premier temps, votre mission consiste à explorer des pistes graphiques pour l’élaboration ultérieure d’un kit de composants UI et d’une bibliothèque de style. Vos propositions devront respecter et afficher les valeurs portées par l’association Framasoft, mais également moderniser et valoriser l’image de l’association.
Vous accompagnerez vos pistes graphiques (exemples de pictogramme, de composants, choix de typographies et de couleurs…) d’une documentation détaillant votre réflexion.

1 « J'aime »

Génial, merci Mathias, ça fait vraiment plaisir de voir davantage d’intervenant·es s’emparer du libre. Je ne sais pas si ton travail a un rapport avec Conviviel ?

Hâte de voir les contributions de tes étudiant·es, les miens travaillent en ce moment même sur Framaspace en 2e année, et vont s’essayer à Framadate pour les 1e année.

Au plaisir de se croiser ici ou IRL !

Bonjour Marie Cécile,

Merci de ton retour. Je ne connaissais pas Conviviel, mais c’est une superbe découverte que je vais partager à mes élèves dés le prochain cours :).
De manière générale j’essaie de solliciter leur esprit « technocritique » dans le cadre de leurs travaux pratiques. Je serai très intéressé par tes retours sur leur travail de Design System si tu as un peu de temps pour y jeter un coup d’oeil :slight_smile:

D’ailleurs tu enseignes dans quel domaine ?

Bonjour @tcit et @MCGodwin,

Comme convenu voici les liens vers les maquettes Figma de mes 3 groupes d’étudiants. Chaque maquette comprend une page Design System et au moins une page d’exemple sur une interface d’outil et sur la page d’accueil de Framasoft*.

Groupe 1 : https://www.figma.com/design/19b1roDN5Xefx0YoPFxkeJ/Framasoft-—-Design?node-id=0-1&p=f&t=EQBEmF3RiYotaKjG-0

Groupe 2 : https://www.figma.com/design/kZbm0CknoHrewUzqc6sAoN/Framaspot-sans-clélia-la-nulle?node-id=0-1&t=fAkHNc8hzx1rWAna-1

*travail réalisé en 2 journées (2x7h) par groupe de 4.

Merci d’avance pour vos retours sur leur travail :).

A bientôt,

Mathias

et voici le lien vers le travail du groupe 3

Groupe 3 : https://www.figma.com/design/stwEcBUQ8f9BzUignUWrSn/Framasoft-teamwork?node-id=0-1&t=LtoVlhvanEE3Zz2C-1

Merci pour le retour, et désolé pour le délai,

Évidemment, mes propres compétences pour juger l’analyse faite et les travaux produits sont assez faibles, mais je vais toutefois essayer de m’y employer (d’autres à Framasoft ou sur ce forum le feront peut-être, n’hésitez pas). :slight_smile:
Et évidemment, cela est mon avis personnel, pas une position ou un jugement de Framasoft sur la question.

Le travail du premier groupe est intéressant, mais je trouve qu’il y manque une certaine logique dans le choix des couleurs pour les boutons (un bouton principal peut être avec le fond bleu ou fond vert) ou les icônes (qu’est-ce qui détermine le fait qu’une icône soit colorée d’une couleur ou l’autre). Le logo se rapproche plus du corbeau que du « pinchot » historique de Framasoft, mais je trouve que cela répond quand même à la question de la modernisation de l’identité. L’intégration proposée dans le service d’exemple de Framindmap est en revanche très réussie.

Le deuxième groupe a produit un travail très poussé, et la proposition, si elle n’est peut-être pas la plus révolutionnaire, est ma préférée visuellement (mais probablement biaisé car elle reprend un peu nos couleurs usuelles). De plus, le rendu fait sur la page d’accueil donne des idées assez intéressantes pour nous. :bulb: C’est donc vers ce travail qu’on irait probablement si on devait choisir, en mode « évolution tranquille mais solide ».

Enfin, le troisième groupe est celui dont le design system est le plus complet et intéressant malgré les propositions très originales qu’on aurait du mal à retenir. Il me semble que le positionnement est bien compris. Toutefois, c’est assez dommage que les problèmes d’accessibilité assez évidents autour des contrastes de certains boutons n’aient pas été identifiés (peut-être par manque de temps ? vu que c’est correct sur la page recherche).

Dans tous les cas, c’est toujours très impressionnant de voir l’étendue des recherches et des productions en un si petit labs de temps, et je vous remercie vivement du travail accompli et de nous les avoir partagé.

On reste à votre disposition si jamais il y a d’autres travaux du genre. :slight_smile:

Bonjour et merci à la fois de la démarche et de tout ce travail des étudiant·es.

Déjà j’ai le sentiment que l’ensemble des étudiant·es ont compris et intégré dans leur réponse les valeurs qui font l’identité de Framasoft. Je ne vois pas de groupe qui soit vraiment tombé dans les écueils d’aller trop vers les clichés visuels autour du numérique (qu’il soit bleu startup nation, gris-lisse à la Apple, ou noir & vert Matrix).

Par exemple, une des boussoles de travail qu’on a avec David Revoy (l’illustrateur qui nous accompagne depuis 2017), c’est de ne jamais montrer ce que l’outil fait (avec claviers, écrans, etc.), mais ce qu’il permet de faire (collaborer ensemble, se retrouver, orchestrer sa pensée, etc.). Cet axe là a clairement été compris et intégré par les groupes.

Le premier groupe garde l’identité du pingouin/manchot, ce qui a en effet son importance « historique » : en LSF, par exemple, le signe pour Framasoft est de dessiner un grand bec d’oiseau devant son visage. (a posteriori, je vois aussi une mascotte « pinchot » en haut de la home page du deuxième groupe, désolé de ne pas l’avoir repéré de suite)

Les trois groupes reprennent d’une manière ou l’autre les animaux meugnons, ce qui là aussi est bien joué. Ils nous servent d’une part à instaurer un rapport sympathique et détendu avec le numérique libre/éthique. Ils montrent qu’on est dans un rapport plus artisanal et chaleureux de petit collectif, que dans un rapport froid lisse et pro rassurant les « cadres sup ». D’autre part, ils permettent aux bénéficiaires et utilisateurices de s’identifier dans une diversité sans forcer visuellement la représentativité artificelle (et reproduire les clichés des vieilles pubs « united colors of benetton »).

La rondeur des polices de titraille des trois groupes (lisibles, mais du coup chaleureuses, amicales) est elle aussi bien jouée.

J’avoue que j’ai plus de mal à identifier les choix de couleurs des groupes 1 & 3 (très flashy) et ce qu’ils visent : qu’est-ce qu’elles permettent d’identifier ou quel rapport veut on instaurer avec le public ? Par exemple : sur notre site https://soutenir.framasoft.org, l’enjeu est de rassurer alors qu’on propose une interface de paiement « maison ». On utilise donc des couleurs douces, chaleureuses, calmes (saumon, etc.). Cette double proposition me fait me demander si les fluos et les contrastes forts ne sont pas ce qui est émergeant et excitant actuellement dans le monde du design graphique… et donc un moyen de répondre à la consigne de moderniser.

Du coup, le deuxième groupe est plus safe au niveau des couleurs, mais ça fonctionne, avec en plus un travail intéressant pour réduire et simplifier la palette (or simplifier et synthétiser c’est généralement plus compliqué, mais dans le cadre de Framasoft et des nombreux projets, c’est essentiel).

Un de nos enjeux, justement, c’est un branding fort. Nous utilisons l’effet de marque, avec regret mais en conscience, parce que « les marques rassurent », et qu’on souhaite rassurer les personnes qui veulent explorer des outils numériques libres. Nous avons aussi besoin d’aider les bénéficiaires à identifier que c’est la même asso derrière « Framapad » et « Framadate ».

En cela, le travail poussé de branding du premier groupe (ainsi que du troisième) est intéressant. Et avoir cette unité, cette identité repérable sur un réseau de site web me semble moins évident avec les proposition de mascottes-animaux du deuxième groupe (ce qui est un crève cœur car de travail est vraiment pensé et chou).

Enfin, je note un gros travail d’organisation de l’information dans l’espace du groupe deux (avec analyse du système de grilles pour la responsivité), ce qui est un vrai enjeu pour nous. Nous avons une culture plus « texte » que « visuel », et la circonstance aggravante qu’on sait que, sur une page web, on peut mettre autant de texte que l’on veut (ce qui n’est pas le cas sur une page papier).

C’est pour nous un vrai enjeu que de s’adapter à la culture visuelle du web, avec des infos synthétiques (quitte à se donner l’espace de longs murs de textes derrière un « en savoir plus »), beaucoup d’illus, et garder de l’espace vide : bravo de l’avoir travaillé.

Voilà pour les retours en vrac, y’a de belles propositions et beaucoup de compréhension sur le « qui nous sommes », ce qui est fondamental, donc bien joué aux groupes. Je pense que c’est en approfondissant le « à qui on s’adresse » et « dans quel but » que les propositions auraient pu être affinées, mais ça ça n’aurait été possible qu’avec plus de temps (et ça me semblerait injuste d’attendre cela d’un travail étudiant avec temps et moyens limités).

Bonjour @Pouhiou et @tcit

Désolé pour le délai de réponse :grimacing:

Merci beaucoup d’avoir pris le temps de nous faire des retours aussi précis, cela va grandement aider les élèves dans leur futur travail (je les retrouve lundi prochain pour leur faire un débrief) !

Je souhaite rééditer cette expérience à l’avenir avec d’autres classes. Et si vous êtes d’accord j’aimerai leur proposer un projet qui répond à des besoins réels pour Framasoft. Je souhaite que les élèves participent à de vrais projets (et surtout d’intérêt publique comme Framasoft !!), pour les mettre dans des conditions de travail réelles et qu’ils puissent justifier d’une expérience concrète dans leur CV/portfolio.

Pourrais-je vous recontacter le cas échéant pour vous demander de quelle manière les élèves pourraient contribuer à l’évolution de la plateforme ?

Merci d’avance pour votre retour,

A bientôt,

Mathias

Bonjour,

Pour ce qui est de faire un projet avec des besoins réels, la difficulté sera probablement notre disponibilité. Nous sommes une toute petite association avec très peu de marge de manœuvre côté technique. Cela pourrait donc créer un peu de déception de votre côté si jamais les travaux produits ne résultaient sur rien du tout faute de temps. Mais si c’est bien pensé comme tel dès le début, alors aucun souci.

Bien sûr, vous pouvez nous contacter directement en utilisant notre formulaire de contact sur https://contact.framasoft.org