Projet interface 1

Pour ID331 : 7 au lieu de 8 périodes hebdomadaires.

Descriptif

Ce cours représente un premier contact avec le design d’interfaces numériques.

Placement dans le cursus

Durant le cursus, ce cours connaît plusieurs “suites”, qui conduiront à concevoir des interfaces de sites web responsive et d’applications.

Pour situer ce cours dans le contexte de la formation:

Objectifs

Dans ce cours, l’objectif est d’apprendre les fondamentaux, et de mettre en place de bonnes méthodes de travail.

À cette étape, les élèves n’ont pas encore de cours de programmation. Il s’agit donc d’établir des maquettes graphiques, pour le web et les écrans.

Decouverte du domaine

Ce cours doit introduire les élèves au domaine professionnel du design d’interfaces. Il doit leur donner l’occasion de voir un maximum de travaux, de construire leurs références et leur vision de ce domaine. Il faut donc leur proposer des activités visant à:

Utilisation des logiciels

Ce cours est un cours “projet”, le mode de travail sera avant tout la réalisation de briefs pratiques. Pour la réalisation des travaux, les élèves devront utiliser des logiciels. Voici ce qui est attendu des élèves en terme de maîtrise des logiciels:

Travaux types à réaliser

Voici des exemples de travaux pouvant être réalisés dans ce cours:

Les élèves sont au début de leur apprentissage, il faut donc que les instructions soient très précises et spécifiques.

Projet “maquette de site web”

L’un des objets concrets de ce cours: produire une maquette de site web. C’est le contenu du cours interentreprise “Frontend 1” (donné aux classes duales sur 4 jours). L’établissement d’un site web (maquette visuelle complète, réalisée avec un outil comme Figma) devra donc impérativement figurer parmi les travaux réalisés dans ce cours.

Projet typographique

Un projet peut se focaliser sur la manière dont les principes typographiques (enseignés dans le cours Communication visuelle) s’appliquent dans un projet pour écran (choix de fontes adaptées au web, utilisation de fontes similaires pour comparer les nuances). Exemples d’application: Design pour un “post” sur un réseau social. Design pour un article de blog.

Introduction à Processing

Un projet peut introduire les élèves aux concepts de la programmation avec Processing (la version Java, simple à installer). L’objectif de ce projet sera de leur donner une première approche pédagogique de la programmation. (cf livre Code as Creative Medium)

Projet “culture du design”

Développer une base de données de références (designers, mouvements, œuvres majeures du design interactif p.ex. “30 sites web à connaître”). Choisir une plateforme (Arena, Notion…) et constituer un catalogue ordonné et commenté.

Format du cours

Ce cours se déroule sur une journée complète. Son mode de fonctionnement devrait ressembler au rythme de travail dans une agence. Un fonctionnement régulier, avec un horaire bien établi qui comporte:

On pourra alterner entre des projets longs, sur plusieurs semaines, et des “projets éclairs” sur une journée ou demi-journée.

Sorties et visites

Vous pouvez au cours du semestre planifier quelques visites: expositions en lien avec les interfaces interactives (p.ex. EPFL Pavilions), visite d’agences… Impliquez les élèves activement dans ces sorties, en leur faisant faire un travail en amont, en leur donnant des consignes d’observation et de récolte de traces (carnet de notes, fiche à remplir).

📚 Références