Programme des cours 2024-2025
ATTENTION : version 2023-2024 de l'engagement pédagogique
DWTR0001-1  
Design Web
  • Structure d'expression créative
  • Design projet (Design projet)
  • Design visuel 1
  • Design visuel mobile
  • Développement d'application web
  • Développement frontend
  • Javascript
  • Graphisme animé avancé
  • Technique de présentation
  • UX/UI appliquées
Volume horaire :
Structure d'expression créative : 20h Th
Design projet (Design projet) : 20h Th
Design visuel 1 : 20h Th
Design visuel mobile : 30h Th
Développement d'application web : 20h Th
Développement frontend : 26h Th
Javascript : 20h Th
Graphisme animé avancé : 20h Th
Technique de présentation : 20h Th
UX/UI appliquées : 20h Th
Nombre de crédits :
Bachelier en techniques graphiques, orientation techniques infographiques18
Nom du professeur :
Structure d'expression créative : François BOURGAUX
Design projet (Design projet) : François BOURGAUX
Design visuel 1 : François BOURGAUX
Design visuel mobile : Maude WERA
Développement d'application web : Christophe TERRANOVA
Développement frontend : Philippe THRONTE
Javascript : Christophe TERRANOVA
Graphisme animé avancé : Robin DEVOUGE, Alexandre TOURNAY
Technique de présentation : François BOURGAUX
UX/UI appliquées : Pauline LOROY, Simon MARCHAL
Référent UE :
Clément SCHMOUKER, Philippe THRONTE
Langue(s) de l'unité d'enseignement :
Langue française
Organisation et évaluation :
Enseignement au deuxième quadrimestre
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 contenu 2 
Sensibilisation à la rédaction de case-studies/d'études de cas dans un but de communiquer, synthétiser et mettre en valeur un travail effectué par l'étudiant(e), exercant un regard critique et analytique sur ses méthodes. 

 

Design visuel 1 

Approche de 2 grands principes graphiques Forme et signe Circulation de blanc 

 

Design visuel mobile 

Notions théoriques et bonnes pratiques de design mobile orienté sur la pratique, la réflexion, l'analyse. 
Focus également sur les spécificités de l'usage de devices mobiles (contexte d'utilisation et impact sur l'ergonomie et le design), navigations spécifiques... 

 

Développement mobile 

Introduction aux contraintes mobiles. Mise en place d'un workflow moderne. Ecran mobile. Utilisation des Modules et de l'ES6. Single page app : Classlist, Fetch, JSON. Webapp Capable. 

 

Développement frontend 

Introduction à l'HTML, sémantique, norme du W3C. 

 

Javascript 

For ... of / Arrow function / Event / String literals / Forms / Méthodes de la classe String / Méthodes de la classe Array / Les promesses et Fetch API 

 

Lean Startup Transmedia 

Cycle de développement traditionnel/Qu'est-ce qu'une startup ?/Notion d'hypothèses?/Le MVP/Comment bien rédiger une hypothèse/Lean Startup vs Design Ethic 

 

Média narratif 2 

Accompagnement à la réalisation de tournages et montages vidéo visant à mettre en valeur le travail réalisé par l'étudiant(e) dans le cadre d'ateliers, d'évènements, ou de cours. 

 

Technique de présentation transmédia 

Démystifier l'idée / Techniques pour trouver l'idée / Une bonne idée c'est bien, savoir en parler, c'est mieux / Présentation des techniques de présentation / Où s'inspirer pour s'inspirer pour travailler la présentation - Boite à outils / Trouver le bon nom pour son projet / Elevator pitch, pourquoi, comment / Retour sur Nom du projet / Dossier de production / Présentation orale 

 

UX/UI appliquées 

Travail théorique et pratique autour de l'utilisabilité, de la perception et de la simplicité. Accepter le fait de ne pas savoir. Mettre en place des méthodes pour comprendre. Transmettre. 
Structure d'expression créative
De la notion de créativité

Des Intelligences Artificielles
Design projet (Design projet)
Mise en pratique des Design Methods autour des cas particuliers que constituent le travail de fin d'année:

- Design Thinking 
- Design Sprint 
- Lean UX 
- Sense & Response 
Design visuel 1
Approche de 2 grands principes graphiques Forme et signe, Circulation de blanc, exercice pratique dans le cadre du TFA
Design visuel mobile
Notions théoriques et bonnes pratiques de design mobile orienté sur la pratique, la réflexion, l'analyse.
Focus également sur les spécificités de l'usage de devices mobiles (contexte d'utilisation et impact sur l'ergonomie et le design), navigations spécifiques...
Développement d'application web
Introduction au développement d'application web à l'aide d'un workflow moderne. Utilisation des Modules et de l'ES6. Single page app : Classlist, Fetch, JSON. Webapp Capable. PWA
Développement frontend
Pratique et développement avancée en HTML/CSS et Javascript
Javascript
Javascript : Approfondissement et concepts avancés :

  • For ... of 
  • Arrow function 
  • Event 
  • String literals 
  • Forms 
  • Méthodes de la classe String 
  • Méthodes de la classe Array 
  • Les promesses et Fetch API
  • Modules
  • ES6
  • Bonnes pratiques 
Graphisme animé avancé
  • Analyse et reproduction d'animations en css / javascript
  • Animation dans Figma
  • Montage vidéo format court
Technique de présentation
Se détacher du pitch de la Startup Nation pour s'orienter simplement vers la présentation de projet.

Démarche

Problèmes rencontrés

Solutions possibles

Solution retenue

Storytelling
UX/UI appliquées
Travail théorique et pratique autour de l'utilisabilité, de la perception et de la simplicité. Accepter le fait de ne pas savoir. Mettre en place des méthodes pour comprendre. Transmettre.   /            
Acquis d'apprentissage (objectifs d'apprentissage) de l'unité d'enseignement :
Choisir et utiliser les moyens d'informations et de communication adaptés. 
Mener une discussion, argumenter et convaincre de manière constructive. 
Utiliser le vocabulaire adéquat. 
Présenter des prototypes de solution et d'application techniques. 
Elaborer une méthodologie de travail. 
Planifier des activités. 
Analyser une situation donnée sous ses aspects techniques et scientifiques. 

Rechercher et utiliser les ressources adéquates. 
Proposer des solutions qui tiennent compte des contraintes. 
Structurer et analyser la communication. 
Définir les étapes, éléments et les outils graphiques et informatiques nécessaires à la réalisation de ceux-ci 
Prendre en compte les contraintes liées à l'utilisation d'un media interactif (ergonomie, accessibilité, caractéristique du public cible, ...) 
Finaliser le visuel en fonction des contraintes (diffusion et visualisation)
Design projet (Design projet)
Au terme de l'AA, l'étudiant-e est capable de?:      

- Concevoir un projet en fonction de ses utilisateurs et d'un objectif précis.

 

Au sein de l'AA, les objectifs sont?:  

- développer des solutions à des problèmatiques identifées auprès d'utilisateurs types.
Design visuel 1
Au terme de l'AA, l'étudiant-e est capable de?:

- Composer et choisir les éléments nécessaire à la transmission d'informations

 

Au sein de l'AA, les objectifs sont?:

- Association de formes signifiantes appropriées à la transmission d'information
Design visuel mobile
/  
Développement frontend
Concevoir, développer et déployer des applications/site web évolutifs et interactifs en utilisant des solutions modernes.
Javascript
 / 
Technique de présentation
Au sein de l'AA, les objectifs sont?: d'accompagner les étudiants dans leur cadre de leur TFA et de leur permettre de présenter le projet devant le jury
UX/UI appliquées
  Comprendre l'humain pour penser et créer des interfaces accessibles. En acquérant des capacités, en se posant les bonnes questions, en se construisant. Pour contribuer au bien être commun.
Savoirs et compétences prérequis :
Design visuel 1
aucun
Design visuel mobile
/  
Développement frontend
aucun
Javascript
 / 
Technique de présentation
   
UX/UI appliquées
être humain
Activités d'apprentissage prévues et méthodes d'enseignement :
AA1= DWTR0001-A-a Design contenu 2 

AA2= DWTR0001-B-a Design visuel 1 

AA3= DWTR0001-C-a Design visuel mobile 

AA4= DWTR0001-D-a Développement mobile 

AA5= DWTR0001-E-a Développement frontend 

AA6= DWTR0001-F-a Javascript 

AA7= DWTR0001-G-a Lean Startup Transmedia 

AA8= DWTR0001-H-a Média narratif 2 

AA9= DWTR0001-I-a Technique de présentation transmédia 

AA10= DWTR0001-J-a UX/UI appliquées 

 

Méthodes d'enseignement?:  Voir EP des AA 
Structure d'expression créative
Cours théoriques

Cours pratiques

Travaux de groupes

Travaux individuels

Remarque : Le recours à certaines IA ne sera autorisé que si dûment et préalablement justifié auprès de l'enseignant.
Design projet (Design projet)
?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.
Design visuel 1
Cours en présentiel et/ou distanciel

Travaux de groupe pratiques

Travaux de groupe en autonomie
Design visuel mobile
Cours théoriques
Cours pratiques
Travaux de groupe
Travaux individuels
Travaux individuels en autonomie
NB : le recours à certains IA ne sera autorisé que si dûment et préalablement justifié auprès de l'enseignant-e.
Développement d'application 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. Toute portion de code générée par une AI doit être explicitement signalée par un commentaire dans le code.
Développement frontend
Cours en présentiel et/ou distanciel

Observation de pratiques

Résolution de problèmes

Travaux de groupe pratiques

Travaux de groupe en autonomie

Travaux de groupe dirigés

Ateliers

Travaux individuels pratiques

Travaux individuels en autonomie

Travaux individuels dirigés

Observations de terrain
Javascript
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. Toute portion de code générée par une AI doit être explicitement signalée par un commentaire dans le code.
Graphisme animé avancé
Cours théoriques

Cours pratiques

Travaux de groupes

Travaux individuels

Remarque : Le recours à certaines IA ne sera autorisé que si dûment et préalablement justifié auprès de l'enseignant.
Technique de présentation
Cours théoriques

Travaux individuels

L'utilisation d'IA est autorisé sous certaines conditions dans le cadre de ce cours.
UX/UI appliquées
Cours en présentiel et/ou distanciel

Observation de pratiques

Résolution de problèmes

Travaux de groupe pratiques

Travaux de groupe en autonomie

Travaux de groupe dirigés

Ateliers

Travaux individuels pratiques

Travaux individuels en autonomie

Travaux individuels dirigés

Observations de terrain

Classe inversée
Mode d'enseignement (présentiel, à distance, hybride) :
Cours en présentiel, Cours à distance, Cours hybride
Structure d'expression créative
Enseignement en présentiel 

Enseignement hybride 
Design projet (Design projet)
Enseignement hybride

Présence de l'enseignant partielle
Design visuel 1
hybride, présence de l'enseignant partielle 
Design visuel mobile
Enseignement hybride, présence de l'enseignant partielle
Développement d'application web
Enseignement en présentiel
Développement frontend
présentiel, à distance, hybride, présence de l'enseignant partielle
Javascript
Enseignement hybride
Graphisme animé avancé
Enseignement en présentiel 

Enseignement hybride 
Technique de présentation
Enseignement hybride
UX/UI appliquées
Enseignement hybride, présence de l'enseignant partielle
Lectures recommandées ou obligatoires et notes de cours :
se référer aux recommandations des différentes AA
Structure d'expression créative
- Support de cours?:  

Espace institutionnel du cours

- Lectures obligatoires : /

- Lectures recommandées : /
Design visuel 1
Lectures recommandées?:

- Ellen lupton - Graphic Design : The New Basics

- Ellen lupton - The ABC's of Triangle, Square, Circle

- David Reinfurt - A New Program for Graphic Design

 

Support de cours?:

espace institutionnel du cours
Design visuel mobile
Support de cours : espace institutionnel du cours /
Développement d'application web
Support de cours : espace institutionnel du cours
Développement frontend
Les slides et les documents qui se trouvent sur Teams
Javascript
Support de cours :
Espace institutionnel du cours

Lectures obligatoires :
/

Lectures recommandées :
/
Graphisme animé avancé
- Support de cours?:  

Espace institutionnel du cours

- Lectures obligatoires : /

- Lectures recommandées : /
Technique de présentation
Support de cours:

espace institutionnel du cours
UX/UI appliquées
Lectures recommandées?: Articles sur Nielsen Norman Group, UX Collective Editors, A List Apart, Smashing Magazine

Lectures obligatoires?: Groupe Teams DWT, mails HEAJ

Support de cours?: PDF sur Teams dans l'onglet "Fichiers"
Modalités d'évaluation et critères :
Évaluation intégrée d'une remise individuelle d'un travail accompagné par sa présentation. Pour que l'UE soit validée, l'étudiant doit obtenir une note supérieure ou égale à 50 % dans l'épreuve intégrée. Se réfèrer au briefing pour les détails de remises complémentaires. 
Structure d'expression créative
   
Design projet (Design projet)
Epreuve intégrée
Design visuel 1
Epreuve intégrée
Design visuel mobile
Cette AA participe à l'évaluation du TJ de l'épreuve intégrée.
Développement d'application web
Cette AA participe à l'évaluation du TJ de l'épreuve intégrée.
Développement frontend
Cette AA participe à l'évaluation du TJ de l'épreuve intégrée.
Javascript
Voir fiche UE.
Cette AA participe à l'évaluation du TJ de l'épreuve intégrée.
Graphisme animé avancé
Cette AA participe à l'évaluation du TJ de l'épreuve intégrée.
Technique de présentation
épreuve intégrée
UX/UI appliquées
épreuve intégrée
Stage(s) :
aucun
Design projet (Design projet)
aucun
Design visuel 1
aucun
Design visuel mobile
aucun
Développement frontend
aucun
Javascript
 / 
Graphisme animé avancé
aucun
Technique de présentation
aucun
UX/UI appliquées
aucun
Remarques organisationnelles :
site de Namur
Structure d'expression créative
- 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
Design projet (Design projet)
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 visuel 1
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 visuel mobile
site de Namur
Développement d'application web
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
Développement frontend
site de Namur
Javascript
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
Graphisme animé avancé
- 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
Technique de présentation
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
UX/UI appliquées
site de Namur
Contacts :
maude.wera@heaj.be  
Structure d'expression créative
privilégiez les conversations Teams
Design projet (Design projet)
Privilégiez la conversation Teams

Si nécessaire mais moins rapide, un email: francois.bourgaux@heaj.be
Design visuel 1
Privilégiez la conversation Teams

Si nécessaire mais moins rapide, un email: francois.bourgaux@heaj.be
Design visuel mobile
Privilégiez la conversation Teams
Lorsque cela s'avère impossible je suis joignable via l'adresse mail maude.wera@heaj.be
Développement d'application web
christophe.terranova@heaj.be
Développement frontend
philippe.thronte@heaj.be
Javascript
christophe.terranova@heaj.be
Graphisme animé avancé
robin.devouge@heaj.be (par Teams ou par email, de préférence pendant les heures de bureau)
Technique de présentation
Privilégiez la conversation Teams

Si nécessaire mais moins rapide, un email: francois.bourgaux@heaj.be
UX/UI appliquées
simon.marchal@heaj.be