Version PDF

École de technologie supérieure

Responsable(s) de cours :

Félix Faucher

PLAN DE COURS

Automne 2026
DSN171 : Introduction au design UI (3 crédits)

Préalables
Aucun préalable requis.

Description du cours
Ce cours vise à familiariser la personne étudiante avec les principes de base du design impliqués dans la création d'interfaces interactives et à l'analyse du design et de l'ergonomie dans le design d'interfaces numériques.

Au terme de ce cours, la personne étudiante sera en mesure de :

de distinguer les différentes phases de production du design d'interfaces Web et mobiles;
d'identifier les critères et bonnes pratiques d'ergonomie et d'accessibilité pour les interfaces numériques;
de concevoir des maquettes fil de fer (wireframe) d'interfaces numériques;
d'utiliser des logiciels pour créer des prototypes interactifs d'interfaces utilisateur;
de traiter des textes et des éléments visuels en respect de la hiérarchie de l'information, de la direction visuelle, des règles et normes typographiques.

Éléments de contenu : maquettes fil de fer (wireframes), hiérarchie visuelle, évaluation heuristique, principes et bonnes pratiques du design d'interface, principes d'accessibilité d'interfaces numériques, typographie, grille graphique, théorie des couleurs, composition visuelle.

Stratégies pédagogiques

Ce cours alterne entre présentations magistrales courtes, démonstrations techniques des logiciels dédiés à la création d’interfaces écrans, travaux pratiques en atelier (travail individuel et en équipe) et travail autonome hors classe.

Les périodes d’enseignement théorique traitent de sujets qui sont investies activement dans le développement d’interfaces écrans par l’usage des applications de création d’interfaces écran et de prototypes interactifs. La personne étudiante est responsable de suivre le calendrier présenté au plan de cours et à rester à l’affût de annonces et des changements qui pourrait subvenir en cours de session sur la plateforme Moodle.

Informations concernant l’agrément du BCAPG
Les objectifs de ce cours sont liés aux indicateurs de qualités requises des diplômés de la manière suivante :

Objectif spécifique	Qualité	Indicateur	Niveau d'enseignement
de distinguer les différentes phases de production du design d’interfaces Web et mobiles;	.
d’identifier les critères et bonnes pratiques d’ergonomie et d’accessibilité pour les interfaces numériques;	.
de concevoir des maquettes fil de fer (wireframe) d’interfaces numériques;	.
d’utiliser des logiciels pour créer des prototypes interactifs d’interfaces utilisateur;	.
de traiter des textes et des éléments visuels en respect de la hiérarchie de l’information, de la direction visuelle, des règles et normes typographiques.	.

Utilisation d’appareils électroniques

La personne étudiante doit avoir un appareil mobile, outil essentiel à la création des prototypes interactifs à concevoir. Avec l’usage de l’application Figma sur un appareil mobile et un ordinateur personnel, la personne étudiante pourra pleinement vivre l’expérience utilisateur en validant la navigation et l’interactivité des projets à développer. Elle doit aussi avoir un ordinateur portable équipé des logiciels demandés pour ce cours. La personne enseignante pourra préciser l’ensemble des outils logiciels en début de session.

Horaire

Groupe	Jour	Heure	Activité
01	Vendredi	09:00 - 12:00	Activité de cours
	Vendredi	13:00 - 15:00	Travaux pratiques

Coordonnées du personnel enseignant le cours

Groupe	Nom	Activité	Courriel	Local	Disponibilité
01	Daniel Lévesque	Travaux pratiques	cc-daniel.levesque@etsmtl.ca		Vendredi 13h à 15h
01	Daniel Lévesque	Activité de cours	cc-daniel.levesque@etsmtl.ca		Vendredi 9h à 12h

Cours

Date	Semaine	Contenu du cours
4 septembre	1	Présentation du cours Présentation du projet 1 Création d’un compte Figma éducationnel Création des équipes pour la phase 1 du projet Laboratoire : Analyse du mandat et esquisses préliminaires de maquettes fil de fer
11 septembre	2	Module - Design graphique et interface utilisateur (UI) Analyse d’un mandat Maquette fil de fer Figma Présentation de l’interface générale, outils, organisation du travail, communauté, kits pour maquettes fil de fer
18 septembre	3	Module - Design graphique et interface utilisateur (UI) Typographie Gestion typographique Logiciels en design graphique Figma Préparation d’un projet Plans de travail Marges, colonnes et gouttières Gestion typographique
25 septembre	4	Remise projet 1A: Maquettes fil de fer (9 heures) Module - Design graphique et interface utilisateur (UI) Théorie de la couleur Palette de couleurs Figma Palette de couleurs
2 octobre	5	Module - Bonne pratique en UI/UX Qualités visuelles et interactivités des interfaces écrans Erreurs courantes Figma Création d’un composant Création d’un bouton interactif (approche simple et options intermédiaires) Analyse des projets de maquettes fil de fer (rencontre des équipes)
9 octobre	6	Module - Système de design Survol de systèmes de design Figma Animation de transition entre les plans de travail (base)
16 octobre	7	Module - Interactivité Composantes interactives des applications mobiles Composantes interactives des sites Web UI Kit Ressources Figma Création d’une vidéo de présentation
23 octobre	8	Remise projet 1B: Design (UI) des interfaces écran (9 heures) Module - Tendances graphiques Les tendances graphiques des interfaces écrans Figma Effets visuels
30 octobre	9	Module - Ergonomie et convivialité Concepts d’ergonomie et de convivialité Figma Création d’un carrousel (Slider)
6 novembre	10	Module - Icônes et images graphiques Les icônes et la navigation Figma Éléments interactifs pour formulaire
13 novembre	11	Remise projet 1C: Prototype interactif (9 heures) Module - Accessibilité Normes d’accessibilité Les divers handicaps Figma Animations de transition entre les plans de travail (avancé)
20 novembre	12	Module - Outils des arts graphiques Univers des applications de design graphique Figma Animations de transition entre les plans de travail (avancé), suite
27 novembre	13	Remise projet 2A: Design (UI) des interfaces écran (9 heures) Soutien technique au projet final
4 décembre	14	Semaine d’examen
11 décembre	15	Remise projet 2B: Prototype interactif (9 heures) Semaine d’examen

Laboratoires et travaux pratiques

En laboratoire, des exercices se feront en équipe afin de susciter des discutions, confrontations d’idées et analyses d’options aux développement de maquettes fil de fer répondant bien aux objectifs de l'application à développer. Le travail de création d’interfaces écrans (interface utilisateur) et la réalisation du prototype interactif seront des travaux individuels. Ils permettront à la personne étudiante de bien évoluer dans l’apprentissage des logiciels nécessaires à la réalisations des projets.

Utilisation d'outils d'ingénierie

Évaluation

Type d'évaluation	Pondération	Modalité	Description	Utilisation de l'IA
Laboratoire	15	En équipe	P1A - Application mobile - Maquette fil de fer	Utilisation guidée
Laboratoire	25	Individuel	P1B - Application mobile - Design d’interface écran	Utilisation guidée
Laboratoire	20	Individuel	P1C - Application mobile - Prototype interactif	Utilisation interdite
Laboratoire	25	Individuel	P2A - Site Web - Design d’interface écran	Utilisation guidée
Laboratoire	15	Individuel	P2B - Site Web - Prototype interactif	Utilisation guidée

Informations additionnelles :

Projet 1 - Développement d’un prototype interactif pour une application mobile

Phase A - Maquette fil de fer
Travail en équipe

Phase B - Design d’interface écran (UI)
Travail individuel

Phase C - Prototype interactif
Travail individuel

Projet 2 - Développement d’un prototype interactif pour un site Web

Phase A - Design d’interface écran (UI)
Travail individuel

Phase B - Prototype interactif
Travail individuel

Politique de retard des travaux
Conformément au Règlement des études de premier cycle (article 7.5.6) et au Règlement des études de cycles supérieurs (article 6.5.6), tout travail (devoir pratique, rapport de laboratoire, rapport de projet, etc.) remis en retard sans motif valable, c’est-à-dire autre que ceux mentionnés à l’article 7.5.5.1 dans le Règlement des études de premier cycle et l’article 6.5.2 dans le Règlement des études de cycles supérieurs, se verra attribuer la note zéro, à moins que d’autres dispositions soient communiquées par écrit par la personne enseignante dans les consignes de chaque travail à remettre ou dans le plan de cours pour l’ensemble des travaux.

Absence à une évaluation

Afin de faire valider une absence à une évaluation en vue d’obtenir un examen de compensation, l’étudiante ou l’étudiant doit utiliser le formulaire prévu à cet effet dans son portail MonÉTS pour un examen final qui se déroule durant la période des examens finaux ou pour tout autre élément d’évaluation surveillé de 15% et plus durant la session. Si l’absence concerne un élément d’évaluation de moins de 15% durant la session, l’étudiant ou l’étudiante doit soumettre une demande par écrit à son enseignante ou enseignant.

Toute demande de validation d’absence doit se faire dans les cinq (5) jours ouvrables suivant la tenue de l’évaluation, sauf dans les cas d’une absence pour participation à une activité prévue aux règlements des études où la demande doit être soumise dans les cinq (5) jours ouvrables avant le jour de départ de l’ÉTS pour se rendre à l’activité.

Toute absence non justifiée par un motif majeur (voir articles 7.2.6.1 du RÉPC et 6.5.2 du RÉCS) entraînera l’attribution de la note zéro (0).

Infractions de nature académique
Les clauses du « Règlement sur les infractions de nature académique de l’ÉTS » s’appliquent dans ce cours ainsi que dans tous les cours du département. Les étudiantes et les étudiants doivent consulter le Règlement sur les infractions de nature académique (www.etsmtl.ca/a-propos/gouvernance/secretariat-general/cadre-reglementaire/reglement-sur-les-infractions-de-nature-academique) pour identifier les actes considérés comme étant des infractions de nature académique ainsi que prendre connaissance des sanctions prévues à cet effet. À l’ÉTS, le respect de la propriété intellectuelle est une valeur essentielle et tous les membres de la communauté étudiante sont invités à consulter la page Citer, pas plagier ! (www.etsmtl.ca/Etudiants-actuels/Baccalaureat/Citer-pas-plagier).

Systèmes d’intelligence artificielle générative (SIAG)
L’utilisation des systèmes d’intelligence artificielle générative (SIAG) dans les activités d’évaluation constitue une infraction de nature académique au sens du Règlement sur les infractions de nature académique, sauf si elle est explicitement autorisée par la personne enseignante du cours ou la personne coordonnatrice dans le cas des stages.

Documentation obligatoire

Ouvrages de références

Adresse internet du site de cours et autres liens utiles

Ressources et inspiration en design UI

mobbin.com
uisources.com
search.muz.li
dribbble.com
behance.net
uxmag.com
smashingmagazine.com
uxplanet.org
awwwards.com/websites/mobile-apps/

Ressources en design graphique

color.adobe.com
pexels.com
pixabay.com
99designs.fr - Typographie
adobe fonts