Aller au contenu

Cours 3.1

Aujourd'hui

Tutorat

Vous vous êtes déjà possiblement trouvés dans cette situation:

HELP... I NEEP HELP, PLEASE !

Bonnne nouvelle, on a une solution pour toi! Le tutorat!

Comment ça marche ?

NOM PLAGE HORAIRE LIEU DATES
Alexis Guilbault (3e) Trou horaire – Mardi 12h30-14h10 En personne au Centre d'aide C-1612 8 sept au 8 déc. inclus.
Olivier Laliberté (3e) Mercredi soir – 20h-21h15 En ligne sur TEAMS : canal Tutorat de l'équipe TIM-Programme TIM 9 sept au 9 déc. inclus.
Thomas Bozelko (2e) Jeudi soir – 20h-21h15 En ligne sur TEAMS : canal Tutorat de l'équipe TIM-Programme TIM 10 sept au 10 déc. inclus
Kellie Gravel (2e) Dimanche soir – 19h-20h15 En ligne sur TEAMS : canal Tutorat de l'équipe TIM-Programme TIM 13 sept au 13 déc. inclus.

Voici l'horaire en ligne disponible sur le site du collège.

Avant chaque séance de tutorat, il y aura une annonce faite par le tuteur pour annoncer sa disponibilité. Cette annonce sera faite dans le canal Général du groupe Teams TIM - Programme TIM .

Pour le tutorat en ligne, il suffit d'envoyer un message privé au tuteur ou à la tutrice, ou directrement dans le canal Tutorat du groupe Teams TIM - Programme TIM .

Pour le tutorat en présence il suffit de se présenter au local C-1602.

Projet portfolio

À propos du github privé et l'invitation de l'enseignante

Le dépôt GitHub doit être privé et vous devez inviter marie-michelle-ouellet comme collaboratrice. Si vous ne le faites pas, vous ne pourrez pas obtenir de rétroaction sur votre projet. Si ce n'est pas fait, faites le maintenant pour la remise 1 planification et du design de la semaine prochaine (gr Enric 14 sept. | gr Lora 17 sept.).

Plusieurs étudiants m'ont déjà invitée mais l'invitation a expiré. Voici la liste, pouvez-vous, svp m'inviter à nouveau?

  • MrPoutineQc/portfolio-zackary-warren
  • JeremyTheriault/portfolio-jeremy-theriault
  • t1ctac19/portofolio-lucas-bonneau
  • Yasser-ElF/portfolio-Yasser-El-Fantroussi
  • FelixLevesqueCM/portfolio-felix-levesque
  • Radouchka/portfolio_rada_ben-maiz
  • NathanSimon9/portfolio-simon-nathan
  • adambenfradj/portfolio-adam-benfradj
  • tighzanour/portfolio-nour-tighza
  • LishunSLD/portfolio-sean-larry-driesen
  • PerformX2/portfolio-nicolas-cruz
  • mar-iamm/mariam-gevorgyan-portfolio
  • FelippeTM21/portfolio-luiz_felippe-sousa
  • nurkouu/portfolio-nurlika-richard
  • 2397931/portfolio-sarah-muller-francois
  • Kliraaa/portfolio-iryna-lysenko

Workflow design assisté par IA : diverger, copier, raffiner

Workflow design assisté par IA : diverger, copier, raffiner

Figma Make et Google Stitch génèrent un premier jet en quelques minutes. Cette page explique où s'arrête l'IA et où commence votre travail : comment passer d'un jet généré à un fichier Figma Design que vous raffinez à la main, et comment distinguer l'inspiration de la copie intégrale.

L'essentiel en 3 points

  1. Générer vite, raffiner à la main. Le premier jet de Figma Make ou Google Stitch n'est jamais le livrable final.
  2. La règle : si tu ne peux pas justifier un choix visuel, tu ne le gardes pas tel quel.
  3. Tout usage se documente dans JOURNAL.md, même gabarit que pour le code.

Pourquoi adapter, pas copier

C'est vous le designer. Un portfolio qui reprend tel quel ce que propose Figma Make ou Google Stitch risque de se fondre dans la masse, comme bien d'autres qui ont tapé un prompt semblable.

Le but du portfolio, c'est de montrer qui vous êtes et votre talent, pas d'être la personne avec le portfolio générique. L'IA peut poser une base ou vous inspirer pour la suite, mais la copie conforme n'est pas acceptée.

À la remise formative

Le groupe d'Enric le 14 septembre et le groupe de Lora le 17 septembre devront montrer leur processus complet : toutes les versions initiales générées par Figma Make ou Stitch, puis le fichier Figma retravaillé, en expliquant ce qui a été adapté.

Inspiration ou copie intégrale : le test en 3 questions

Avant de garder un écran généré par l'IA, réponds à ces trois questions.

  1. Est-ce que ce choix reflète mon persona, ou juste ce qui est sorti par défaut de l'outil?
  2. Si je devais recréer cet écran de mémoire sans l'IA, saurais-je pourquoi chaque élément est là?
  3. Ai-je changé au moins 3 choses substantielles (palette, typographie, structure, hiérarchie), pas juste un détail cosmétique?

Sinon

Tu retravailles l'écran. Le test n'est pas là pour te ralentir, il est là pour que le résultat soit vraiment le tien.

Documenter dans le journal de bord

Même réflexe que pour le code généré par IA, appliqué au design.

- **Généré avec :** Figma Make (ou Google Stitch)
- **Prompt :** [le prompt exact]
- **Ce que j'ai modifié :** palette recentrée sur mon persona, hiérarchie
  typographique refaite, structure de navigation simplifiée

Le workflow technique

Depuis Figma Make

  1. Dans l'aperçu du fichier Make, naviguer jusqu'à l'écran voulu.
  2. Cliquer « Copy design » en haut de Figma Make.
  3. Coller dans un fichier Figma Design.

À retenir

Ce que ça copie est un instantané statique : pas connecté au fichier Make d'origine, pas rattaché à un design system, pas interactif. C'est un point de départ à retravailler à la main, pas un aller-retour synchronisé.

Depuis Google Stitch

Stitch a un bouton « Copy to Figma » natif, mais il ne fonctionne pas avec tous les modèles : il n'est pas disponible avec l'agent le plus avancé (Gemini 3 Pro), seulement avec les agents plus simples.

Si le bouton ne fonctionne pas pour ton modèle, l'alternative est de recréer l'écran à la main en s'en inspirant visuellement. Pas la peine de chercher un outil tiers de conversion parfaite, la friction du raffinage manuel est justement la compétence qu'on vient chercher.

Le vrai changement en agence

Avant Maintenant
Brief → premières maquettes en 3-4 jours Brief → premier jet IA en quelques minutes
Révisions client sur une seule direction 2-3 variantes vues le jour même
Handoff développeur Raffinage manuel dans Figma Design, puis handoff

Nuance professionnelle

Ce workflow accéléré brille pour du volume élevé et une complexité modérée : pages d'atterrissage, sites vitrines, gabarits marketing. Pour du design de produit complexe, l'IA reste un point de départ, le jugement humain fait le raffinage. L'IA accélère le brouillon, pas le jugement.

Pensez déjà aux animations

Sans les prototyper dans Figma : juste y réfléchir pendant que vous travaillez le design. Plusieurs de ces idées, vous les connaissez déjà via Anime.js en Web 3.

Technique Description
Parallax L'arrière-plan bouge plus lentement que le premier plan. ✅ vu avec Anime.js
Révélation au scroll Un élément apparaît en fondu et monte légèrement à l'écran. ✅ comme un .from() Anime.js
Cascade (stagger) Plusieurs éléments apparaissent l'un après l'autre, léger délai. ✅ stagger() Anime.js
Épinglage (pinning) Une section reste fixe pendant que le contenu progresse. 🆕 nouveau
Texte révélé Mots ou lignes qui apparaissent un à un. 🆕 nouveau
Barre de progression Un indicateur visuel qui avance avec la lecture. 🆕 nouveau

Obligatoire

Les animations pilotées par le défilement (scroll) sont obligatoires.

À considérer aussi, des interactions dynamiques : survol (hover), clic, transition vers une autre page.

Vous n'avez pas encore vu GSAP ni les animations pilotées par le défilement en cours, ça viendra plus tard dans la session. Aujourd'hui, on planifie l'idée, pas la technique.

Documentez votre idée dans PLANIFICATION.md :

- **Élément à animer :** [ex. les cartes de projets]
- **Type d'animation :** [ex. fondu et léger déplacement vers le haut]
- **Déclencheur :** [ex. apparition au défilement, survol, clic]

Exigé pour la Remise 1

Ce n'est pas juste une bonne pratique suggérée : c'est un livrable exigé de la Remise 1, au même titre que la justification des choix technologiques.

Des exemples pour s'inspirer

En atelier aujourd'hui

  • Raffiner les maquettes mobile et desktop, à partir des directions retenues.
  • Filtrer selon persona, accessibilité, et maintenant : justifiable et distinctif.
  • S'assister des outils gratuits de Figma (auto-layout, contenu, images, vectorisation).
  • Anticiper les animations au scroll et les interactions, sans les prototyper.
  • Documenter chaque changement substantiel dans JOURNAL.md.

Devoir

Portfolio : remise 1

À remettre pour la semaine prochaine (gr. Enric 14 sept. | gr. Lora 17 sept.) :

  • Github initialisé, privé, avec invitation de l'enseignante comme collaboratrice.
    • Structure de dossiers cohérente et convention de nommage uniforme.
    • Fichiers README.md, PLANIFICATION.md et JOURNAL.md créés.
    • Commits réguliers, fréquents et bien nommés.
  • Fichier PLANIFICATION.md complété, incluant la justification des choix technologiques, de design et d'animations prévues.
  • Design mobile et desktop (Figma Design), adapté à votre style et à votre persona. Vous devrez l'exporter en PDF et le déposer dans le dépôt GitHub.
  • JOURNAL.md:
    • Journal de bord documentant toutes les étapes du processus, incluant les versions initiales générées par Figma Make ou Stitch, et les modifications apportées.
    • Répondre aux 5 questions du premier bloc du projet.
    • Inscrire toute question posée à l'IA, avec date, prompt, outil utilisé et résultat obtenu.

Important: Tout pousser sur votre dépôt GitHub avant la date limite et remettre le lien (URL) du dépôt dans le devoir sur TEAMS.