Programme des cours 2022-2023
| DWTR0001-1 | |||||
Design Web Transmédia
|
|||||
|
Volume horaire :
|
|||||
| Design contenu 2 : Design visuel 1 : Design visuel mobile : Développement mobile : Développement frontend : Javascript : Lean Startup Transmédia : Média narratif 2 : Technique de présentation transmédia : UX/UI appliquées : |
|||||
|
Nombre de crédits :
|
|||||
|
|||||
|
Nom du professeur :
|
|||||
| Design contenu 2 : Alexandre TOURNAY
Design visuel 1 : François BOURGAUX Design visuel mobile : Maude WERA Développement mobile : Christophe TERRANOVA Développement frontend : Philippe THRONTE Javascript : Philippe THRONTE Lean Startup Transmédia : François BOURGAUX Média narratif 2 : Alexandre TOURNAY Technique de présentation transmédia : François BOURGAUX, Michel D'URSO UX/UI appliquées : Simon MARCHAL |
|||||
|
Référent UE :
|
|||||
| Alexandre TOURNAY, Maude WERA | |||||
|
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. |
|||||
|
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, 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 mobile
|
|||||
| Introduction aux contraintes mobiles. Utilisation d'un workflow moderne. Ecran mobile. Utilisation des Modules et de l'ES6. Single page app : Classlist, Fetch, JSON. Webapp Capable. PWA | |||||
|
Développement frontend
|
|||||
| Introduction à l'HTML, sémantique, norme du W3C. | |||||
|
Javascript
|
|||||
|
|||||
|
Lean Startup Transmédia
|
|||||
|
|||||
|
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
|
|||||
Les thèmes abordés sont?:
|
|||||
|
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 contenu 2
|
|||||
| Au terme de l'AA, l'étudiant-e est capable de?: Mettre sur papiers ses réflexions, de manière synthétique et organisée. Au sein de l'AA, les objectifs sont?: Exercer l'esprit d'autocritique et la rédaction de contenu. |
|||||
|
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
|
|||||
| Au terme de l'AA, l'étudiant-e est capable de?: créer des interfaces mobiles ergonomiques et esthétiques prenant en compte les besoins spécifiques liés à ces formats. Au sein de l'AA, les objectifs sont?: développer le sens critique de l'étudiant par la veille et l'analyse d'interfaces mobiles afin de comprendre quelles sont les pratiques d'usage. |
|||||
|
Développement mobile
|
|||||
| Au terme de l'AA, l'étudiant-e est capable de?: réaliser une application web avec les technologies web et une méthode de travail moderne. Au sein de l'AA, les objectifs sont?: donner des outils aux étudiants pour concevoir des applications web répondant aux contraintes mobiles. |
|||||
|
Développement frontend
|
|||||
| Concevoir un site responsive mobile first avec les CSS et la méthode BEM. | |||||
|
Javascript
|
|||||
| Au terme de l'AA, l'étudiant-e est capable de?développer des scripts javascript moyennement complexes et de manipuler des data externes sous forme de JSON Au sein de l'AA, les objectifs sont?: apprendre la théorie avant d'appliquer ces connaissances via des exercices |
|||||
|
Lean Startup Transmédia
|
|||||
| Au terme de l'AA, l'étudiant-e est capable de?rédiger une hypothèse critique et de réaliser un MVP pertinen | |||||
|
Média narratif 2
|
|||||
| Au terme de l'AA, l'étudiant-e est capable de?: réaliser un métrage, une interview, une capsule, en faire le montage, l'étalonnage et la retouche et trucages. Au sein de l'AA, les objectifs sont?: maîtriser les compétences vidéos requises à la création de contenu vidéo. |
|||||
|
Technique de présentation transmédia
|
|||||
| Au terme de l'AA, l'étudiant-e est capable de trouver une idée de projet à développer dans la cadre de son TFA et d'en parler publiquement dans un pitch construit. Au sein de l'AA, les objectifs sont?: d'accompagner les étudiants dans leur cadre de leur TFA et de leur permettre de pichter 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 contenu 2
|
|||||
| aucun | |||||
|
Design visuel 1
|
|||||
| aucun | |||||
|
Design visuel mobile
|
|||||
| aucun | |||||
|
Développement mobile
|
|||||
| Bases du HTML, CSS et JS. | |||||
|
Développement frontend
|
|||||
| aucun | |||||
|
Javascript
|
|||||
| aucun | |||||
|
Lean Startup Transmédia
|
|||||
| aucun | |||||
|
Média narratif 2
|
|||||
| aucun | |||||
|
Technique de présentation transmédia
|
|||||
| aucun | |||||
|
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 |
|||||
|
Design contenu 2
|
|||||
| Cours en présentiel et/ou distanciel Travaux de groupe pratiques Travaux de groupe en autonomie |
|||||
|
Design visuel 1
|
|||||
| Cours en présentiel et/ou distanciel Travaux de groupe pratiques Travaux de groupe en autonomie |
|||||
|
Design visuel mobile
|
|||||
| Cours en présentiel et/ou distanciel Travaux de groupe pratiques Travaux de groupe en autonomie Ateliers Travaux individuels pratiques Travaux individuels en autonomie |
|||||
|
Développement mobile
|
|||||
| Cours en présentiel et/ou distanciel | |||||
|
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 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 |
|||||
|
Lean Startup Transmédia
|
|||||
| Cours en présentiel et/ou distanciel | |||||
|
Média narratif 2
|
|||||
| ?Cours en présentiel et/ou distanciel Travaux de groupe pratiques ?Travaux de groupe en autonomie |
|||||
|
Technique de présentation transmédia
|
|||||
| Cours en présentiel et/ou distanciel Travaux de groupe pratiques Travaux de groupe en autonomie Ateliers Travaux individuels pratiques Travaux individuels en autonomie |
|||||
|
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 | |||||
|
Design contenu 2
|
|||||
| Enseignement en présentiel Enseignement hybride Présence de l'enseignant totale |
|||||
|
Design visuel 1
|
|||||
| hybride, présence de l'enseignant partielle | |||||
|
Design visuel mobile
|
|||||
| Enseignement hybride, présence de l'enseignant partielle | |||||
|
Développement mobile
|
|||||
| ?Enseignement en présentiel, présence de l'enseignant totale | |||||
|
Développement frontend
|
|||||
| présentiel, à distance, hybride, présence de l'enseignant partielle | |||||
|
Javascript
|
|||||
| Enseignement hybride, présence de l'enseignant partielle | |||||
|
Lean Startup Transmédia
|
|||||
| Enseignement hybride, présence de l'enseignant partielle | |||||
|
Média narratif 2
|
|||||
| Enseignement hybride, présence de l'enseignant partielle | |||||
|
Technique de présentation transmédia
|
|||||
| Enseignement hybride, présence de l'enseignant partielle | |||||
|
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 | |||||
|
Design contenu 2
|
|||||
| Groupe Teams DWT, mails HEAJ | |||||
|
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?: -?Slides au format PDF sur Team dans l'onglet Fichiers du canal du cours. |
|||||
|
Design visuel mobile
|
|||||
| Teams HEAJ, extranet, Doodle, google drive ... | |||||
|
Développement mobile
|
|||||
| Teams HEAJ Slides et support en ligne | |||||
|
Développement frontend
|
|||||
| Les slides et les documents qui se trouvent sur Teams | |||||
|
Javascript
|
|||||
| Groupe Teams DWT, mails HEAJ | |||||
|
Lean Startup Transmédia
|
|||||
| Lectures recommandées?: - Lean Startup - Adoptez l'innovation continue - Eric Ries Support de cours?: - PDF sur Team |
|||||
|
Média narratif 2
|
|||||
| Groupe Teams DWT, mails HEAJ, Fichiers distribués en classe | |||||
|
Technique de présentation transmédia
|
|||||
| Groupe Teams DWT, mails HEAJ | |||||
|
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. | |||||
|
Design contenu 2
|
|||||
| Présentiel, remise de travaux dans le cadre d'une épreuve intégrée, évaluation identique d'une session à l'autre | |||||
|
Design visuel 1
|
|||||
| Epreuve intégrée | |||||
|
Design visuel mobile
|
|||||
| épreuve intégrée | |||||
|
Développement mobile
|
|||||
| épreuve intégrée | |||||
|
Développement frontend
|
|||||
| épreuve intégrée | |||||
|
Javascript
|
|||||
| épreuve intégrée | |||||
|
Lean Startup Transmédia
|
|||||
| épreuve intégrée | |||||
|
Média narratif 2
|
|||||
| épreuve intégrée | |||||
|
Technique de présentation transmédia
|
|||||
| épreuve intégrée | |||||
|
UX/UI appliquées
|
|||||
| épreuve intégrée | |||||
|
Stage(s) :
|
|||||
| aucun | |||||
|
Design contenu 2
|
|||||
| aucun | |||||
|
Design visuel 1
|
|||||
| aucun | |||||
|
Design visuel mobile
|
|||||
| aucun | |||||
|
Développement mobile
|
|||||
| aucun | |||||
|
Développement frontend
|
|||||
| aucun | |||||
|
Javascript
|
|||||
| aucun | |||||
|
Lean Startup Transmédia
|
|||||
| aucun | |||||
|
Média narratif 2
|
|||||
| aucun | |||||
|
Technique de présentation transmédia
|
|||||
| aucun | |||||
|
UX/UI appliquées
|
|||||
| aucun | |||||
|
Remarques organisationnelles :
|
|||||
| site de Namur | |||||
|
Design contenu 2
|
|||||
| Namur | |||||
|
Design visuel 1
|
|||||
| site de Namur | |||||
|
Design visuel mobile
|
|||||
| site de Namur | |||||
|
Développement mobile
|
|||||
| site de Namur | |||||
|
Développement frontend
|
|||||
| site de Namur | |||||
|
Javascript
|
|||||
| site de Namur | |||||
|
Lean Startup Transmédia
|
|||||
| site de Namur | |||||
|
Média narratif 2
|
|||||
| site de Namur | |||||
|
Technique de présentation transmédia
|
|||||
| site de Namur | |||||
|
UX/UI appliquées
|
|||||
| site de Namur | |||||
|
Contacts :
|
|||||
| maude.wera@heaj.be | |||||
|
Design contenu 2
|
|||||
| alexandre.tournay@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
|
|||||
| maude.wera@heaj.be | |||||
|
Développement mobile
|
|||||
| christophe.terranova@heaj.be | |||||
|
Développement frontend
|
|||||
| philippe.thronte@heaj.be | |||||
|
Javascript
|
|||||
| alexandre.colienne@heaj.be | |||||
|
Lean Startup Transmédia
|
|||||
| francois.bourgaux@heaj.be | |||||
|
Média narratif 2
|
|||||
| alexandre.tournay@heaj.be | |||||
|
Technique de présentation transmédia
|
|||||
| laura.latour@heaj.be | |||||
|
UX/UI appliquées
|
|||||
| simon.marchal@heaj.be | |||||