bouton de retour en haut de page Go
Photo de deux personnes qui prennent une photo

Mise en situation

Dans le cadre de l’UE Rethinking UX (RUX), nous avons été amenés à repenser l’aménagement d’une salle de classe vide (A084) en partant des besoins réels des étudiant·e·s. L’objectif : concevoir et proposer des solutions concrètes et réalisables pour améliorer leur expérience dans cet espace.

L’objectif est d’identifier leurs attentes pour concevoir un aménagement fonctionnel améliorant leur expérience et leurs conditions d’apprentissage.

Photo de la classe avant les travaux

Le . de départ

Le projet a débuté en groupe : ensemble, nous avons identifié les besoins et les envies des étudiants à travers des échanges informels, des discussions dirigées et un questionnaire que nous avons conçu collectivement. L’objectif était de proposer des solutions pertinentes et cohérentes avec les attentes réelles, tout en tenant compte des contraintes budgétaires imposées. Pour cela, nous avons mené une étude de marché et élaboré trois scénarios budgétaires distincts afin de couvrir un large éventail de possibilités.

Ce travail collaboratif a permis d’établir une base commune solide, sur laquelle chacun allait pouvoir développer son propre projet individuel. La consigne suivante était de créer un case study présenté sous forme de site web, en exploitant les données et les conclusions obtenues lors de la phase de groupe.

Pour ma part, j’ai choisi d’opter pour un design simple et épuré, en adéquation avec la dimension littéraire du contenu. J’ai voulu mettre l’accent sur la lisibilité et la clarté, en minimisant les éléments visuels superflus pour laisser toute la place au texte. Des lignes graphiques fines et discrètes viennent structurer l’espace, tout en renforçant l’identité visuelle du projet. J’ai également expérimenté avec la mise en page typographique afin de dynamiser l’ensemble tout en conservant une certaine sobriété.

Image du figma

Du concept à la vision creative

J’ai choisi d’opter pour un design simple et épuré afin de faciliter la lecture et mettre en valeur le contenu textuel. L’idée était de ne pas surcharger visuellement l’interface, mais au contraire de créer un environnement clair et lisible, qui guide naturellement l’œil du lecteur.

Pour apporter une touche graphique discrète, j’ai utilisé des lignes comme éléments visuels. Elles permettent de structurer la page tout en conservant la légèreté du design. J’ai également expérimenté avec la mise en forme du texte : jeux de hiérarchies typographiques, espacements travaillés, alignements précis… L’objectif était de créer un rythme de lecture agréable et cohérent.

Le design textuel a représenté une part essentielle du projet. Le contenu étant principalement textuel, il était crucial de réfléchir à la manière de le présenter de façon esthétique et accessible, tout en conservant une certaine personnalité graphique.

Image du slider

Développement du site

Pour la partie développement, je me suis lancé quelques défis techniques afin de sortir de ma zone de confort. Le principal challenge était de créer un slider interactif pour illustrer les différents budgets. J’ai également voulu positionner des lignes graphiques à des endroits précis, ce qui m’a poussé à expérimenter davantage avec le positionnement CSS. Enfin, j’ai intégré un mode sombre pour offrir une alternative visuelle à l'utilisateur.

Ces défis m’ont permis d’apprendre de nouvelles choses. Par exemple, j’ai utilisé l’intelligence artificielle pour m’aider à construire le slider de manière efficace. J’ai aussi approfondi l’utilisation des pseudo-éléments ::before et ::after, très utiles pour insérer mes lignes graphiques sans alourdir le HTML. Quant au mode sombre, nous en avions déjà développé un en cours, j’ai donc pu m’appuyer sur cette base et l’adapter à mon site.

Ce projet m’a permis de renforcer ma maîtrise du HTML et du CSS, mais aussi de mieux comprendre comment structurer mon code pour qu’il soit à la fois fonctionnel et propre.