Designing With Web
Partie 3 · Phase 1: Prototyper

Comment remplir ce document ?
Modifiez simplement le fichier index.html en remplissant tous les élements qui portent la classe .todo. Vous pouvez ensuite supprimer la classe petit à petit pour vous assurer que vous n'oubliez rien (chaque passage manquant sera coloré).

Au passage, "lorem ipsum" est juste un texte factice utilisé pour les espaces de texte et pour tester les mises en page. Vous pouvez en apprendre davantage à ce sujet sur loremipsum.io.

Groupe (votre numéro de groupe)

Ajoutez votre nom à la liste et ajoutez un lien vers l'exploration individuelle que vous avez faite pour la partie 2.

Our group

Notre sujet

Notre sujet est (collez votre sujet ici).
Il provient de l'Objectif de Développement Durable de l'ONU numéro (numéro de l'ODD), intitulé "(titre de l'ODD)".

Notre problématique

La problématique que nous avons formulée ensemble est "(écrivez la problématique de votre groupe ici)". Nos deux projets ci-dessous cherchent à répondre à cette question.

Projet 1 · (donnez un nom à votre projet)

Contexte

Quand ? Où ? Qui ? Pourquoi ? Expliquez le contexte de votre projet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae at pariatur eos eum voluptas eaque animi cumque! Molestiae molestias velit numquam, incidunt! Blanditiis, cupiditate repellat qui eum molestias, temporibus! Qui! Incidunt harum expedita aperiam fugiat, quaerat corporis fugit quam praesentium, minus alias, repellat deleniti, dignissimos iure nulla vitae ullam voluptatum temporibus. Ipsa nam sint ullam odit quia vero fuga laboriosam.

Dolore commodi fugiat cum quidem quas accusamus ab hic, est reprehenderit, odio error adipisci similique provident aliquid. Laudantium recusandae obcaecati enim aut perferendis non, ad amet minus et, iste molestias?

Cible + persona

Pour qui ? Décrivez les utilisateurs et les bénéficiaires de votre projet, puis proposez un persona rapide (reportez-vous à la partie 2 du cours pour des conseils méthodologiques).

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae at pariatur eos eum voluptas eaque animi cumque! Molestiae molestias velit numquam, incidunt! Blanditiis, cupiditate repellat qui eum molestias, temporibus! Qui! Incidunt harum expedita aperiam fugiat, quaerat corporis fugit quam praesentium, minus alias, repellat deleniti, dignissimos iure nulla vitae ullam voluptatum temporibus. Ipsa nam sint ullam odit quia vero fuga laboriosam.

Persona

Service proposé

Quoi ? Comment ? Expliquez comment votre solution fonctionne, ce qu'elle permet à l'utilisateur de faire, et comment elle résout le problème initial.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae at pariatur eos eum voluptas eaque animi cumque! Molestiae molestias velit numquam, incidunt! Blanditiis, cupiditate repellat qui eum molestias, temporibus! Qui! Incidunt harum expedita aperiam fugiat, quaerat corporis fugit quam praesentium, minus alias, repellat deleniti, dignissimos iure nulla vitae ullam voluptatum temporibus. Ipsa nam sint ullam odit quia vero fuga laboriosam.

Fonctionalités + parcours utilisateur

Expliquez quelles fonctionnalités votre projet implique et hiérarchisez-les de la plus importante à la moins importante. Rappelez-vous : une fonctionnalité est un verbe + un nom, elle décrit une action que l'utilisateur peut faire.

Ensuite, pour votre première et plus importante fonctionnalité (la fonctionnalité clé), écrivez et dessinez le parcours utilisateur : quelles étapes l'utilisateur devra-t-il franchir, de la situation initiale à la situation finale ? Encore une fois, référez-vous à la partie 2 du cours pour des conseils méthodologiques.

Fonctionnalités

Parcours utilisateur

(Ajoutez ici un dessin du parcours utilisateur pour la fonctionnalité principale)

Illustrations

Trouvez des images qui décrivent l'univers autour de votre service (contexte, utilisateurs, lieux, technologies...). Ne cherchez pas à illustrer le service final que vous avez en tête mais plutôt son contexte. En gros, traduisez les mots-clés que vous avez utilisés dans les descriptions ci-dessus en images.

Benchmark

Listez de potentiels concurrents ou des projets liés, et décrivez les similitudes et les différences avec votre projet.

Références

Livres, films, articles… listez des références qui peuvent être pertinentes pour ce projet, et expliquez pourquoi.

Projet 2 · (donnez un nom à votre projet)

Contexte

Quand ? Où ? Qui ? Pourquoi ? Expliquez le contexte de votre projet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae at pariatur eos eum voluptas eaque animi cumque! Molestiae molestias velit numquam, incidunt! Blanditiis, cupiditate repellat qui eum molestias, temporibus! Qui! Incidunt harum expedita aperiam fugiat, quaerat corporis fugit quam praesentium, minus alias, repellat deleniti, dignissimos iure nulla vitae ullam voluptatum temporibus. Ipsa nam sint ullam odit quia vero fuga laboriosam.

Dolore commodi fugiat cum quidem quas accusamus ab hic, est reprehenderit, odio error adipisci similique provident aliquid. Laudantium recusandae obcaecati enim aut perferendis non, ad amet minus et, iste molestias?

Cible + persona

Pour qui ? Décrivez les utilisateurs et les bénéficiaires de votre projet, puis proposez un persona rapide (reportez-vous à la partie 2 du cours pour des conseils méthodologiques).

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae at pariatur eos eum voluptas eaque animi cumque! Molestiae molestias velit numquam, incidunt! Blanditiis, cupiditate repellat qui eum molestias, temporibus! Qui! Incidunt harum expedita aperiam fugiat, quaerat corporis fugit quam praesentium, minus alias, repellat deleniti, dignissimos iure nulla vitae ullam voluptatum temporibus. Ipsa nam sint ullam odit quia vero fuga laboriosam.

Persona

Service proposé

Quoi ? Comment ? Expliquez comment votre solution fonctionne, ce qu'elle permet à l'utilisateur de faire, et comment elle résout le problème initial.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae at pariatur eos eum voluptas eaque animi cumque! Molestiae molestias velit numquam, incidunt! Blanditiis, cupiditate repellat qui eum molestias, temporibus! Qui! Incidunt harum expedita aperiam fugiat, quaerat corporis fugit quam praesentium, minus alias, repellat deleniti, dignissimos iure nulla vitae ullam voluptatum temporibus. Ipsa nam sint ullam odit quia vero fuga laboriosam.

Fonctionalités + parcours utilisateur

Expliquez quelles fonctionnalités votre projet implique et hiérarchisez-les de la plus importante à la moins importante. Rappelez-vous : une fonctionnalité est un verbe + un nom, elle décrit une action que l'utilisateur peut faire.

Ensuite, pour votre première et plus importante fonctionnalité (la fonctionnalité clé), écrivez et dessinez le parcours utilisateur : quelles étapes l'utilisateur devra-t-il franchir, de la situation initiale à la situation finale ? Encore une fois, référez-vous à la partie 2 du cours pour des conseils méthodologiques.

Fonctionnalités

Parcours utilisateur

(Ajoutez ici un dessin du parcours utilisateur pour la fonctionnalité principale)

Illustrations

Trouvez des images qui décrivent l'univers autour de votre service (contexte, utilisateurs, lieux, technologies...). Ne cherchez pas à illustrer le service final que vous avez en tête mais plutôt son contexte. En gros, traduisez les mots-clés que vous avez utilisés dans les descriptions ci-dessus en images.

Benchmark

Listez de potentiels concurrents ou des projets liés, et décrivez les similitudes et les différences avec votre projet.

Références

Livres, films, articles… listez des références qui peuvent être pertinentes pour ce projet, et expliquez pourquoi.