Programme des cours 2025-2026
|
ATTENTION : version 2025-2026 de l'engagement pédagogique
|
|||||
| TPIG0001-1 | |||||
Travaux pratiques de techniques infographiques
|
|||||
|
Volume horaire :
|
|||||
| Design grilles : 12h Th Hierarchie visuelle 2 : 30h Th Direction artistique pour le Web : 15h Th Design orienté utilisateur : 30h Th Principe d'animations d'interfaces : 18h Th UX design : 25h Th Outil de design technique : Design frontend 2 : |
|||||
|
Nombre de crédits :
|
|||||
|
|||||
|
Nom du professeur :
|
|||||
| Design grilles : François BOURGAUX
Hierarchie visuelle 2 : François BOURGAUX Direction artistique pour le Web : Maude WERA Design orienté utilisateur : Simon MARCHAL, Melih SELAMET Principe d'animations d'interfaces : Robin DEVOUGE, Alexandre TOURNAY UX design : Simon MARCHAL, Melih SELAMET Outil de design technique : Design frontend 2 : |
|||||
|
Référent UE :
|
|||||
| François BOURGAUX, Alexandre TOURNAY | |||||
|
Langue(s) de l'unité d'enseignement :
|
|||||
| Langue française | |||||
|
Organisation et évaluation :
|
|||||
| Enseignement au premier quadrimestre, examen en janvier | |||||
|
Unités d'enseignement prérequises et corequises :
|
|||||
| Les unités prérequises ou corequises sont présentées au sein de chaque programme | |||||
|
Contenus de l'unité d'enseignement :
|
|||||
| Les thèmes abordés sont?: Design grilles - Organisation d'espaces finis - Organisation d'espaces infinis - Les types de grilles Design textes - Macrotypo - Microtypo? Direction artistique pour le Web - Qu'est-ce que la direction artistique - Design émotionnel - Principes de design - Lois de la Gestalt - Définir une direction artistique dans le cadre d'un projet Human centered design - Travail théorique et pratique autour de l'utilisabilité, de la perception et de de la simplicité. - Accepter le fait de ne pas savoir. - Mettre en place des méthodes pour comprendre. - Transmettre. Média narratif 1 Sensibilisation à la réalisation de montages vidéo, sur base d'un contenu textuel/script travaillé au préalable par l'étudiant(e) ou d'un évènement/atelier dans lequel il/elle est impliqué(e) UX design Réflexion et analyse autour de composantes de sites existants afin d'en dégager les forces et faiblesses ergonomiques. Exercices pratiques d'analyse et de prototyping Design technique Les étudiants plongeront dans le monde du design d'interface et du prototypage grâce à Figma |
|||||
|
Design grilles
|
|||||
| Les thèmes abordés sont?:
- Organisation d'espaces finis - Organisation d'espaces infinis - Les 4 types de grilles?:
- Capital Grid |
|||||
|
Hierarchie visuelle 2
|
|||||
| Les thèmes abordés sont?: - Macrotypo?: - L'interlignage - Titre, sous-titre et paragraphe - Marge et espace vertical - Microtypo?: - Caractères accentués - liste - ligature - etc.... - Les Variable Font |
|||||
|
Direction artistique pour le Web
|
|||||
| Les thèmes abordés sont?: - Qu'est-ce que la direction artistique - Les fondamentaux du design - Outils et méthodes d'émergence de concepts - Définir une direction artistique dans le cadre d'un projet |
|||||
|
Design orienté utilisateur
|
|||||
| Le contenu adopte d'abord une approche globale, explorant ses applications à travers différents secteurs afin d'en saisir les concepts fondamentaux. L'objectif est de fournir une compréhension approfondie du design centré sur l'humain avant de se spécialiser dans la conception de sites web. La première phase se concentre sur l'analyse des besoins des utilisateurs et sur la manière d'organiser le contenu en conséquence. Par la suite, l'accent est mis sur la phase de production, où les étudiants apprennent à développer des interfaces web accessibles et inclusives, en s'appuyant sur un Design System répondant aux normes professionnelles. |
|||||
|
Principe d'animations d'interfaces
|
|||||
|
|||||
|
UX design
|
|||||
| Ce cours propose une approche initiale étendue, permettant d'appréhender les fondamentaux de l'expérience utilisateur dans divers contextes avant de se concentrer sur le domaine spécifique du web. La première phase est dédiée à l'étude des principes théoriques de l'UX, avec un accent sur la structuration et l'organisation des contenus selon les attentes des utilisateurs. Progressivement, le contenu s'oriente vers des compétences plus techniques, avec l'apprentissage de la mise en place d'un Design System appliqué à la création d'interfaces web, respectant les exigences professionnelles en termes d'accessibilité et d'usabilité. |
|||||
|
Acquis d'apprentissage (objectifs d'apprentissage) de l'unité d'enseignement :
|
|||||
Au sein de l'UE, les objectifs sont?:
|
|||||
|
Design grilles
|
|||||
| Au terme de l'AA, l'étudiant-e est capable de?: - Comment placer un ensemble de texte dans un écran au format infini et y associer des éléments visuels. Au sein de l'AA, les objectifs sont?: - Composer une grille et la décliner pour différents types d'écrans. |
|||||
|
Hierarchie visuelle 2
|
|||||
| Au terme de l'AA, l'étudiant-e est capable de?: - Composer des blocs de textes lisibles et rythmer un ensemble d'informations textuelles selon une hiérarchie appropriée. Au sein de l'AA, les objectifs sont?: - La mise en forme d'un simple paragraphe à l'élaboration d'une hiérarchie correctement rythmée. Les grands principes de base de la ponctuation, des listes, des citations, des chiffres et des ligatures. |
|||||
|
Direction artistique pour le Web
|
|||||
| / | |||||
|
Design orienté utilisateur
|
|||||
| v. fiche UE | |||||
|
UX design
|
|||||
| v. fiche UE | |||||
|
Savoirs et compétences prérequis :
|
|||||
|
Design orienté utilisateur
|
|||||
| v. fiche UE | |||||
|
UX design
|
|||||
| v. fiche UE | |||||
|
Activités d'apprentissage prévues et méthodes d'enseignement :
|
|||||
| AA1= Design grilles AA2= Design textes AA3= Direction artistique pour le Web AA4= Human centered design AA5= Média narratif 1 AA6= UX design Méthodes d'enseignement?: Voir EP des AA |
|||||
|
Design grilles
|
|||||
| Cours en présentiel et/ou distanciel Observation de pratiques Travaux de groupe en autonomie Travaux individuels pratiques Travaux individuels en autonomie L'utilisation d'IA est autorisé dans le cadre de ce cours. |
|||||
|
Hierarchie visuelle 2
|
|||||
| ?Cours en présentiel et/ou distanciel Observation de pratiques Travaux individuels pratiques Travaux individuels en autonomie L'utilisation d'IA est autorisé sous certaines conditions dans le cadre de ce cours. |
|||||
|
Direction artistique pour le Web
|
|||||
| Cours pratiques Travaux individuels Travaux de groupes Remarque : L'étudiant devra être capable d'expliquer et justifier tout le code qu'il utilise, qu'il soit produit personnellement, copié d'une ressource externe ou généré par une AI. / |
|||||
|
Design orienté utilisateur
|
|||||
| Les méthodes d'enseignement sont variées : exposés magistraux interaction entre élèves / débats travaux de groupe exercices pratiques Le recours à certaines IA ne sera autorisé que si dûment et préalablement justifié auprès de l'enseignant |
|||||
|
Principe d'animations d'interfaces
|
|||||
|
|||||
|
UX design
|
|||||
| Les méthodes d'enseignement sont variées : exposés magistraux interaction entre élèves / débats travaux de groupe exercices pratiques Le recours à certaines IA ne sera autorisé que si dûment et préalablement justifié auprès de l'enseignant |
|||||
|
Mode d'enseignement (présentiel, à distance, hybride) :
|
|||||
| Voir EP AA | |||||
|
Design grilles
|
|||||
| Enseignement hybride | |||||
|
Hierarchie visuelle 2
|
|||||
| Enseignement hybride Présence de l'enseignant partielle |
|||||
|
Direction artistique pour le Web
|
|||||
| Enseignement en présentiel Présence de l'enseignant totale |
|||||
|
Design orienté utilisateur
|
|||||
| hybride | |||||
|
Principe d'animations d'interfaces
|
|||||
| ?Enseignement hybride | |||||
|
UX design
|
|||||
| hybride | |||||
|
Lectures recommandées ou obligatoires et notes de cours :
|
|||||
| Voir EP AA | |||||
|
Design grilles
|
|||||
| Lectures recommandées:
Emil Ruder - Typography: A Manual of Design Josef Mu¨ller-Brockmann - Grid systems Support de cours: espace institutionnel du cours |
|||||
|
Hierarchie visuelle 2
|
|||||
| Lectures recommandées?:
- Stop Stealing Sheep & Find Out How Type Works - Erik Spiekermann - Shaping Text: Type, Typography and the Reader - Jan Middendorp - Better Web Typography for a Better Web - Matej Latin - Web Typography - Richard Rutter Support de cours: espace institutionnel du cours |
|||||
|
Direction artistique pour le Web
|
|||||
| Support de cours : espace institutionnel du cours / | |||||
|
Design orienté utilisateur
|
|||||
| Cette liste est présente dans les slides disponibles sur teams. | |||||
|
Principe d'animations d'interfaces
|
|||||
| - Support de cours?:
Espace institutionnel du cours - Lectures obligatoires : / - Lectures recommandées : / |
|||||
|
UX design
|
|||||
| Cette liste est présente dans les slides disponibles sur teams. | |||||
|
Modalités d'évaluation et critères :
|
|||||
| Mode d'évaluation :
Présentiel Organisation de l'évaluation : Remise de travaux Défense orale Type d'évaluation : Épreuve intégrée Type de cotation UE : La réussite de l'épreuve intégrée de l'UE est définie par :
La réussite de l'épreuve intégrée de l'UE est définie par l'appréciation générale du jury lors de l'épreuve, qui compose 100% de la note de l'UE. |
|||||
|
Design grilles
|
|||||
| Epreuve intégrée Evaluation identique d'une session à l'autre |
|||||
|
Hierarchie visuelle 2
|
|||||
| Epreuve intégrée | |||||
|
Direction artistique pour le Web
|
|||||
| Cette AA participe à l'évaluation du TJ de l'épreuve intégrée. | |||||
|
Design orienté utilisateur
|
|||||
| Cette AA participe à l'évaluation du TJ de l'épreuve intégrée. | |||||
|
UX design
|
|||||
| Cette AA participe à l'évaluation du TJ de l'épreuve intégrée. | |||||
|
Stage(s) :
|
|||||
|
Design orienté utilisateur
|
|||||
| non | |||||
|
UX design
|
|||||
| non | |||||
|
Remarques organisationnelles :
|
|||||
| Implantation:
Namur Organisation horaire de la formation: enseignement en horaire de jour Organisation horaire de l'UE: voir hyperplanning : https ://heaj-planning.hyperplanning.fr/hp/etudiant |
|||||
|
Design grilles
|
|||||
| Implantation:
Namur Organisation horaire de la formation: enseignement en horaire de jour Organisation horaire de l'UE: voir hyperplanning : https ://heaj-planning.hyperplanning.fr/hp/etudiant |
|||||
|
Hierarchie visuelle 2
|
|||||
| Implantation:
Namur Organisation horaire de la formation: enseignement en horaire de jour Organisation horaire de l'UE: voir hyperplanning : https ://heaj-planning.hyperplanning.fr/hp/etudiant |
|||||
|
Design orienté utilisateur
|
|||||
| non | |||||
|
Principe d'animations d'interfaces
|
|||||
| - Implantation :
Namur - Organisation horaire de la formation : Enseignement en horaire de jour - Organisation horaire de l'AA : Voir hyperplanning : https://heaj-planning.hyperplanning.fr/hp/etudiant |
|||||
|
UX design
|
|||||
| non | |||||
|
Contacts :
|
|||||
| francois.bourgaux@heaj.be | |||||
|
Design grilles
|
|||||
| Privilégiez la conversation Teams
Si nécessaire mais moins rapide, un email: francois.bourgaux@heaj.be |
|||||
|
Hierarchie visuelle 2
|
|||||
| Privilégiez la conversation Teams
Si nécessaire mais moins rapide, un email: francois.bourgaux@heaj.be |
|||||
|
Direction artistique pour le Web
|
|||||
| Privilégiez la conversation Teams Lorsque cela s'avère impossible je suis joignable via l'adresse mail maude.wera@heaj.be |
|||||
|
Design orienté utilisateur
|
|||||
| melih.selamet@heaj.be | |||||
|
Principe d'animations d'interfaces
|
|||||
| robin.devouge@heaj.be | |||||
|
UX design
|
|||||
| melih.selamet@heaj.be | |||||