Programme des cours 2025-2026
| 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 : Gaëlle GABAN, 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 : Philippe THRONTE Design frontend 2 : Philippe THRONTE |
|||||
|
Référent UE :
|
|||||
| François BOURGAUX, Gaëlle GABAN, Clément SCHMOUKER, 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 :
|
|||||
|
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é. |
|||||
|
Outil de design technique
|
|||||
| Prise en main de figma - outils de base - mise en place d'une grille - preview d'un prototype et partage - concevoir des prototypes |
|||||
|
Design frontend 2
|
|||||
|
|||||
|
Acquis d'apprentissage (objectifs d'apprentissage) de l'unité d'enseignement :
|
|||||
| Concevoir et réaliser une communication interactive : - Structurer et analyser la communication - Définir les étapes, éléments et les outils graphiques et informatiques nécessaires à la réalisation de celle-ci - Prendre en compte les contraintes liées à l'utilisation d'un média interactif (ergonomie, accessibilité, caractéristique du public cible, etc.) Communiquer et informer : - Choisir et utiliser les moyens d'informations et de communication adaptés - Mener une discussion, argumenter et convaincre de manière constructive - Assurer la diffusion vers les différents niveaux de la hiérarchie (interface) - Utiliser le vocabulaire adéquat - Présenter des prototypes de solution et d'application techniques - Utiliser une langue étrangère |
|||||
|
Design grilles
|
|||||
|
Hierarchie visuelle 2
|
|||||
|
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 :
|
|||||
|
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 |
|||||
|
Outil de design technique
|
|||||
|
|||||
|
Design frontend 2
|
|||||
|
|||||
|
Mode d'enseignement (présentiel, à distance, hybride) :
|
|||||
|
Design grilles
|
|||||
| Enseignement hybride | |||||
|
Hierarchie visuelle 2
|
|||||
|
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 | |||||
|
Outil de design technique
|
|||||
|
|||||
|
Design frontend 2
|
|||||
|
|||||
|
Lectures recommandées ou obligatoires et notes de cours :
|
|||||
|
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. | |||||
|
Outil de design technique
|
|||||
|
|||||
|
Design frontend 2
|
|||||
|
|||||
|
Modalités d'évaluation et critères :
|
|||||
Mode d'évaluation :
Organisation de l'évaluation :
Type de cotation UE :
Modalités de cotation applicables pour toute l'UE :
Modalités d'évaluation pour les différentes sessions :
|
|||||
|
Design grilles
|
|||||
|
Hierarchie visuelle 2
|
|||||
|
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. | |||||
|
Principe d'animations d'interfaces
|
|||||
| Mode d'évaluation : Présentiel ET distanciel Organisation de l'évaluation : Remise de travaux Type d'évaluation : Épreuve pour l'AA avec travail journalier Modalités de cotation : Épreuve pour l'AA 10% ; TJ 90% |
|||||
|
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 | |||||
|
Outil de design technique
|
|||||
|
|||||
|
Design frontend 2
|
|||||
|
|||||
|
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 | |||||
|
Outil de design technique
|
|||||
| philippe.thronte@heaj.be | |||||
|
Design frontend 2
|
|||||
| philippe.thronte@heaj.be | |||||