Programme des cours 2024-2025
|
ATTENTION : version 2023-2024 de l'engagement pédagogique
|
|||||
| DWTR0001-1 | |||||
Design Web
|
|||||
|
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 :
|
|||||
|
|||||
|
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 :
|
|||||
|
Graphisme animé avancé
|
|||||
|
|||||
|
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 | |||||