DWTR0001-1 : Design Web

Programme des cours 2023-2024

Accès direct

Organisation et évaluation
Contenus de l'unité d'enseignement
Acquis d'apprentissage (objectifs d'apprentissage) de l'unité d'enseignement
Savoirs et compétences prérequis
Activités d'apprentissage prévues et méthodes d'enseignement
Mode d'enseignement (présentiel, à distance, hybride)
Lectures recommandées ou obligatoires et notes de cours
Modalités d'évaluation et critères
Stage(s)
Remarques organisationnelles
Contacts

ATTENTION : version 2022-2023 de l'engagement pédagogique

DWTR0001-1

Design Web

Design contenu 2
Design projet (Design projet)
Design visuel 1
Design visuel mobile
Développement mobile
Développement frontend
Javascript
Média narratif 2
Technique de présentation
UX/UI appliquées

Volume horaire :

Design contenu 2 : 20h Th
Design projet (Design projet) : 20h Th, 20h Th
Design visuel 1 : 20h Th
Design visuel mobile : 30h Th
Développement mobile : 20h Th
Développement frontend : 26h Th
Javascript : 20h Th
Média narratif 2 : 20h Th
Technique de présentation : 20h Th
UX/UI appliquées : 20h Th

Nombre de crédits :

Bachelier en techniques graphiques, orientation techniques infographiques		18

Nom du professeur :

Design contenu 2 : Philippe THRONTE, Alexandre TOURNAY
Design projet (Design projet) : François BOURGAUX, Philippe THRONTE
Design visuel 1 : François BOURGAUX, Philippe THRONTE
Design visuel mobile : Philippe THRONTE, Maude WERA
Développement mobile : Christophe TERRANOVA, Philippe THRONTE
Développement frontend : Philippe THRONTE
Javascript : Philippe THRONTE
Média narratif 2 : Philippe THRONTE, Alexandre TOURNAY
Technique de présentation : François BOURGAUX, Philippe THRONTE
UX/UI appliquées : Simon MARCHAL, Philippe THRONTE

Référent UE :

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.

Design contenu 2

Adobe Premiere Pro

Adobe After Effects

Blackmagic Davinci Resolve

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 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

Pratique et développement avancée en HTML/CSS et Javascript

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

Média narratif 2

Adobe Premiere Pro

Adobe After Effects

Blackmagic Davinci Resolve

Intelligences Artificielles

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

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

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

aucun

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

Design contenu 2

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é 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 mobile

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.

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

Activités d'apprentissage

Cours en présentiel et/ou distanciel
Observation de pratiques
Résolution de problèmes
Ateliers
Travaux individuels pratiques

Méthodes d'enseignement

Enseignement en présentiel
Présence de l'enseignant totale

Média narratif 2

Technique de présentation

Cours théoriques

Travaux individuels

L'utilisation d'IA est autorisé dans le cadre de ce cours.

UX/UI appliquées

Mode d'enseignement (présentiel, à distance, hybride) :

Cours en présentiel, Cours à distance, Cours hybride

Design contenu 2

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 mobile

Enseignement en présentiel

Développement frontend

présentiel, à distance, hybride, présence de l'enseignant partielle

Javascript

Enseignement hybride, présence de l'enseignant partielle

Média narratif 2

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

Design contenu 2

- 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 mobile

Support de cours : espace institutionnel du cours

Développement frontend

Les slides et les documents qui se trouvent sur Teams

Javascript

Groupe Teams DWT, mails HEAJ

Média narratif 2

- 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.

Design contenu 2