Logiciel / Débutant

Interface d’inscription accessible pour un club étudiant fictif

Concevez une petite interface d’inscription pour un club étudiant imaginaire. Montrez des états clairs, un parcours au clavier et des limites honnêtes.

Commencer avec ce brief Exemples de livrables

Les 30 premières minutes

Avant de commencer

Des bases honnêtes en HTML et CSS sont nécessaires ; aucun backend ni donnée personnelle n’est requis. Si tu ne codes pas, tu peux choisir un brief de design ou de communication.

Les 30 premières minutes

Sur papier, liste les champs, les états et le message de réussite. Transforme ensuite cette liste en squelette HTML simple avant de peaufiner l’apparence.

Livrable suffisant à petite échelle

Un dépôt Git ou un fichier de code consultable.Un fichier HTML avec la structure de l’écran d’inscription.
Des captures montrant les trois états du formulaire.Trois états visibles : vide, invalide et rempli.
Une note d’essai au clavier et sur écran étroit.Une note courte sur l’usage au clavier et sur un écran étroit.
Un README qui explique les décisions et les limites.Un README qui explique une décision et une limite.

Pour aller plus loin, si tu le souhaites

Ajoute d’autres états de formulaire, par exemple une erreur de réseau simulée, sans créer de backend ni demander de données personnelles.

Organisation de fichiers proposée

inscription.html
ecrans.png
decisions.md
accessibilite.md

Présentation type

Dans cet exemple, une étudiante imagine la page d’inscription d’un événement d’un club du campus. Elle commence par trois écrans papier, puis traduit le parcours dans un fichier HTML statique. Son livrable montre un champ vide, une erreur de saisie et un état rempli, avec une note sur le clavier et l’écran étroit. Il s’agit d’un exercice fictif qui montre une forme de présentation, pas d’un produit utilisé ni d’un résultat client.

Exemple de concept représentatif : ce n’est ni un travail réalisé pour un client ni ton travail personnel. Observe la forme et écris tes propres décisions.

Le modèle de démarrage n’est pas un livrable terminé. Produis toi-même tes preuves.

01Scénario

Imaginez un club étudiant fictif qui souhaite recueillir des inscriptions à un événement. L’exercice n’a pas de backend ni de client réel : utilisez seulement des noms synthétiques et des données d’exemple.

Objectif

Réalisez une interface que l’on peut comprendre et parcourir sans souris. Montrez comment le formulaire se comporte lorsqu’il est vide, invalide puis rempli.

02Portée et limites

N’ajoutez ni backend ni collecte de données personnelles réelles ; utilisez uniquement des noms synthétiques.
Montrez les états vide, invalide et rempli du formulaire.
Vérifiez le parcours au clavier et sur un écran étroit.

03Étapes de production

1
Définissez les champs, les messages d’erreur et le parcours attendu.
2
Construisez une première version avec des données fictives.
3
Testez les trois états du formulaire au clavier et sur un écran étroit.
4
Documentez vos décisions, vos limites et les essais réalisés.

04Preuves à remettre

Un dépôt Git ou un fichier de code consultable.
Des captures montrant les trois états du formulaire.
Une note d’essai au clavier et sur écran étroit.
Un README qui explique les décisions et les limites.

05Questions à vous poser

Une personne peut-elle comprendre quoi faire sans explication orale ?
Qu’avez-vous changé après votre essai au clavier ?
Quelle limite importante faudrait-il traiter dans un projet réel ?

06Sources et licences

Utilisez vos propres éléments ou des ressources sous licence ouverte appropriée. Notez le nom de la licence et l’URL de chaque source ; ne considérez pas une image trouvée au hasard sur Internet comme libre. Indiquez les contributions de l’équipe et de l’IA, le cas échéant.

Guide de présentation éthique