2025-2026
| Code | Titulaire(s) | Langue(s) d'enseignement | Langue(s) d'évaluation | Théorie | Pratique | Période(s) | Année académique |
|---|---|---|---|---|---|---|---|
| B-SGRA-048 | STRAPPAZON Richard | français | français | 72 | 0 | Q1 | 2025-2026 |
Connaissances
Au terme de l’activité, l’étudiant sera capable de :
Expliquer les principes de mise en page spécifiques aux écrans .
Décrire les contraintes techniques et ergonomiques liées aux médias interactifs (navigation, lisibilité, responsive design).
Reconnaître les éléments des interfaces numériques.
Aptitudes
Au terme de l’activité, l’étudiant sera capable de :
Structurer et hiérarchiser l’information de manière pertinente et lisible sur des écrans.
Créer des maquettes graphiques et des prototypes fonctionnels répondant aux contraintes techniques et esthétiques.
Intégrer des animations et des micro-interactions pour renforcer l’ergonomie et la fluidité de l’interface.
Compétences
Au terme de l’activité, l’étudiant sera capable de :
Structurer et hiérarchiser l’information de manière pertinente et lisible sur des écrans.
Créer des maquettes graphiques et des prototypes fonctionnels répondant aux contraintes techniques et esthétiques.
Intégrer des animations et des micro-interactions pour renforcer l’ergonomie et la fluidité de l’interface.
1 Introduction et aux enjeux visuels
Définitions de l’expérience utilisateur (UX) et de l’interface utilisateur (UI).
Principes de base de l'HTML et le CSS
2 Principes de mise en page pour écrans
Organisation visuelle (grilles, hiérarchie, cohérence graphique).
Contraintes spécifiques de l’écran : résolution, lisibilité, ergonomie (interactions tactiles, menus , etc.).
Mise en page réactive (responsive design) et adaptation aux supports (ordinateur, tablette, smartphone).
3 Création de maquettes et prototypes fonctionnels
Wireframes : schémas structurels et hiérarchie de l’information.
Maquettes graphiques : style, couleurs, typographie adaptée aux écrans.
L'intégration en l'HTML et le CSS
Tests et corrections pour assurer la clarté et la cohérence.
4 Réalisation d’un projet final numérique
Conception et réalisation d’un prototype ou d’un projet intégrant la mise en page adaptée aux écrans fixes et aux écrans animés..
Type de support
Site internet
Références
-Prises de notes
-Supports internes éventuels (tutoriels, fiches techniques sur la mise en page et l’ergonomie d’écrans).
Don’t Make Me Think – Steve Krug
Designing Interfaces – Jenifer Tidwell
Ressources sur le responsive design (Adobe , Figma, etc.).
Les usages de l’Intelligence Artificielle dans l’enseignement supérieur sont référencés et détaillés au sein d'une charte institutionnelle. Consultez le site https://ia.condorcet.be pour plus d'informations.