Comporte les heures du CIE 1 (UI/UX)

Descriptif

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

Placement dans le cursus

• En cursus FPC, il se fait en parallèle avec le cours EP “Design d’interfaces 1”.
• En cursus Plein-temps, le cours EP ne vient qu’au 2e semestre.

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:

• Structure des cours Développement.
• Structure des cours Design d’interfaces.

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 à:

• Analyser, observer des interfaces (sites, applications…).
• Développer une culture du design écran (évolution du web, des applications).
• Connaître les métiers touchant à ce domaine : Designer UI, UX, intégratrice, développeuse front-end, content strategist, ergonome, etc.
• Connaître la terminologie: wireframe, maquette, prototype, basse/haute fidélité, “design tiles”, “pattern library”…

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:

• Logiciel design d’interface (Figma): ce cours devrait donner une place à l’apprentissage d’un logiciel de design d’interface (pour les FPC: en coordination avec le cours EP Design d’interfaces 1).
• Logiciel image: Photoshop est enseigné en S1 dans le cours Création d’images.
• Logiciel image vectorielle: Illustrator est enseigné en S1 dans le cours Création d’images.
• Logiciel de mise en page: InDesign est enseigné en S1 dans le cours Communication visuelle - Typographie.

Travaux types à réaliser

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

• maquette de site promotionnel
• maquette d’application simple (p.ex: appli météo, cf Lupton p.122)
• maquette d’interface “commande de menu dans un restaurant self-service”
• maquette d’interface domotique (lumière, température)
• charte graphique pour interface (typo, couleur)
• reverse-engineer an interface
• interface “ascenseur de 1000 étages”
• projet Fax (interface interactive)
• Worst of the Web
• 20-minute music app

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 travaux “obligés” 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.

Format du cours

Dans les cours “Projet Interface”, le mode de fonctionnement devrait ressembler au rythme de travail dans une agence. Un fonctionnement régulier, avec un horaire bien établi qui comporte:

• des moments d’analyse de brief
• des moments de travail individuel
• des moments de travail en binôme
• des présentations et critiques des travaux en cours.
• des moments didactiques où l’enseignant-e présente des savoirs-faire.

Les élèves doivent apprendre ces différents modes de travail qui sont nouveaux. L’enseignant-e doit les accompagner et clarifier le processus.

Sorties et visites

Vous pouvez au cours du semestre planifier une visite: 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

• Typo et design pour écran, Ellen Lupton, Pyramyd, 2015 (traduction de: Type on Screen, 2014).
• Art Direction for The Web, Andy Clarke, Smashing Magazine, 2019. Disponible en bibliothèque Eracom-EPISC (004.03.03 CLAO). Lien Teams.
• Dan Brown, Communicating Design, New Riders, 2011. Disponible en bibliothèque Eracom-EPISC (004.03.03 BRO). Lien Teams.
• Benedikt Groß, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni, Generative Design.