Espace enseignants

Design interactif et bases de l’intégration S1

Cet atelier vise à initier les étudiants aux bases du design interactif et de l’intégration.

Dates

Année 2020 - 2021
Semaine 2020-42
Début le 12/10/20

Description

Atelier création de site web simple
1. Découvrir le processus de création, puis la production technique d’un site web
statique.
2. Découvrir les bases du design d’interaction et comprendre ses différentes
facettes.
3. Aborder le développement en vulgarisant l’aspect technique, pour que les
étudiants soient plus à l’aise et ne fassent pas de blocage sur le dev.

Objectifs DA.
Minimum :
- Montrer toutes les facettes du Design d”interaction (ex: flipper ouigo / amazon)
- Poser l'arborescence
- Comprendre les grilles et le responsive
- Élaborer un univers graphique
Bonus :
- Animer les maquettes réalisées

Objectifs Dev.
Minimum :
- démystifier le développement de site internet
- renforcer les acquis / acquérir des bases HTML / CSS
- utilisation de l’inspecteur chrome
Bonus :
- aborder le versionning (git)
- aborder les animations css
- aborder les préprocesseurs CSS (sass)
- aborder Javascript et jQuery

Format.
Groupes de 3-4 élèves.
Simulation d’un appel d’offre, où les groupes représenteront des studios digitaux. Le
sujet portera sur une refonte d’un site simple (choix entre 3 sites sélectionnés par nos
soins) : design (sous adobe XD) desktop / mobile et intégration du site statique (html,
css, js).
2 cours “magistraux” : 4h design, 4h dev, puis des petits ateliers sur des points
techniques plus précis, tout au long de la semaine, ainsi que du suivi pour chaque
groupe.

Planning.
Lundi : présentations (nos métiers, notre expérience) + kick-off pour la semaine, matinée cours de design sous adobe XD, puis après-midi pratique.
Mardi : matinée cours de dev HTML/CSS, puis après-midi pratique.
Mercredi, jeudi et vendredi : les groupes avancent sur leur sites, échangent, et se partagent les tâches de la production design et dev. Nous leur proposons en plus des cours, “ateliers”, sur différents thèmes design et dev. Nous suivrons l’avancée de chaque groupe tout au long de la semaine.

Livrable (En fonction du niveau de la promo) :
- 1 maquette photoshop
- 1 page web desktop intégrée
Livrable + :
- 1 maquette desktop + 1 maquette mobile
- 1 page web intégrée responsive

Personnes impliquées

Alexis Benoit
  • Alexis Benoit

Intervenants planifiés

Les heures sont des heures du point de vue de l'étudiant. Le cours magistral (CM) est un cours dispensé à toute la promotion en même temps (50 étudiants). Les travaux dirigés (TD) sont des cours donnés par demi-groupe. Les travaux pratiques (TP) sont des cours en 1/3 de groupe. Un TD de 2 heures assuré pour 1 seul groupe compte comme 1 heure, parce que la moitié de la promotion a 0 heures de cours, et l'autre moitié 2 heures. Dans ce cas, une autre personne assurera 2 heures de TD pour l'autre groupe, ce qui ramènera le total à 2 heures.

Personne Promotion Contenu Heures CM TD TP
Intervenant à préciser 2022

3 3
Intervenant à préciser 2022

1 1
Intervenant à préciser 2022

1 1
Intervenant à préciser 2022

4 4
Alexis Benoit 2022

11 11
Alexis Benoit 2022

5 5
Martine Bornerie 2022

1 1
Clément Casanas 2022

1 1
Clément Casanas 2022

8 8
Eric Cattelain 2022

1 1
Marlène Dulaurans 2022

6 6
Marlène Dulaurans 2022

4 4
Oscar Motta 2022

1 1
Erika Puget 2022

1 1

Objectifs visés par ce projet

Module Objectif
M1104 - Esthétique et expression artistique Donner confiance en ses capacités créatives lorsque l’on n’a pas la maîtrise du geste.
M1104 - Esthétique et expression artistique Développer le sens artistique et la créativité.
M1105 - Écriture pour les médias numériques Analyser et Concevoir une interface (navigation, ergonomie, accessibilité).
M1106 - Communication, expression écrite et orale Prendre conscience des enjeux de la communication
M1107 - Gestion de projet Permettre aux étudiants de choisir l’outil adapté à un besoin donné. Il s'agit de pour l'étudiant de comprendre l'intérêt de mener une démarche construite de gestion de projet, et de savoir mettre en forme les documents permettant de convaincre ensuite avec crédibilité les interlocuteurs et les partenaires.
M1108 - PPP découvrir l’amplitude des métiers et des environnements professionnels liés à I'internet et au multimédia, appréhender la diversité des environnements professionnels, et leurs conditions d’exercice ; (savoirs, savoirfaire, qualités-clefs des différents métiers ; qualités requises pour les exercer, compétences à acquérir… ), identifier les parcours de formation permettant l’accès à ces métiers et postes de travail, acquérir des connaissances et savoir-faire dans l’élaboration, la mise en oeuvre et la réalisation d’un projet d’orientation, et/ou de formation professionnelle.
M1204 - Infographie Être capable de faire des choix techniques et d’intervenir sur les points graphiques d’un projet multimédia.
M1204 - Infographie Acquérir une certaine aisance autant dans la manipulation des outils que dans l'exploitation de leurs possibilités au niveau expressif et graphique.
M1205 - Intégration web Connaître les notions de bases de l'intégration Web.