Découvre l'UX/UI et Figma

Les Makers vont découvrir l’univers de l’UX (User Experience) et de l’UI (User Interface) Design, ainsi que l’outil puissant Figma pour la conception de pages web.

Objectifs pédagogiques 

  • Comprendre l’importance de l’UX Design pour rendre les sites faciles à utiliser. 
  • Découvrir les bases de l’UI Design pour créer une apparence visuelle attrayante.
  • Apprendre à utiliser Figma, un outil de conception web professionnel.
  • Concevoir des pages web adaptées aux écrans mobiles.

Compétences techniques

  • Compréhension approfondie des principes de l’UX et de l’UI Design.
  • Maîtrise de l’utilisation de Figma, un outil de conception web puissant.
  • Organisation efficace des éléments de design en utilisant des groupes.
  • Utilisation de composants Thunkable dans la conception de l’application mobile.
  • Application des meilleures pratiques de conception pour les petits écrans.

Compétences design

  • Compréhension de l’importance de l’esthétique et de la convivialité dans la conception d’interfaces utilisateur.
  • Création d’interfaces utilisateur attrayantes en utilisant des éléments de design tels que la couleur, la taille et la mise en page.
  • Capacité à créer des éléments de design tels que les grilles.
  • Création de boutons interactifs et de liens pour une navigation conviviale.
  • Utilisation de Figma pour visualiser et prototyper des designs d’application mobile.

Compétences projets

  • Création d’une application mobile innovante en réponse à un besoin spécifique.
  • Brainstorming et génération d’idées créatives en groupe.
  • Réflexion personnelle pour sélectionner une idée de projet passionnante.
  • Utilisation de Figma pour créer des wireframes et des prototypes d’interface utilisateur.
  • Expérimentation et exploration de fonctionnalités de conception.

La place dans le module

Cette activité vient après l’activité Action-Vérité / Jukebox et avant l’activité Projet Libre

Jour 1

Jour 2

Jour 3

Jour 4

Jour 5

1h

30 min

30 min

🤩

1h

🤩

Matériel

  • Un ordinateur avec une connexion Internet
  • Un compte Gmail
  • Un compte Figma

Déroulé de l'activité

Segmentation de l’activité 

 

Détails de l’activité

Segment 1 (30 min) Qu’est-ce que l’UX Design et l’UI Design ? 

1 / Introduction (5 minutes)
  • Accueillir les Makers avec enthousiasme et leur dire que nous allons découvrir le monde passionnant du design web, comme des professionnels du design !
 
2 / Qu’est-ce que l’UX Design et l’UI Design ?  (10 minutes)
  • Expliquer l’UX Design : sites web faciles à utiliser.
  • Expliquer l’UI Design : sites web beaux et attrayants avec de belles images, des couleurs et des boutons.
  • Utiliser des exemples amusants pour illustrer la différence.
  • Souligner l’importance des deux aspects du design web.
 
3/  La magie de deux versions du site web (5 minutes)
  • Parler de la différence site sur Ordi & Mobile
 
4/ Astuces pour concevoir pour les petits écrans  (10 minutes) 
  • Parler des bonnes Pratiques pour créer un site ou Application Mobile

Segment 2 (1 heure) Début Projet Libre & Création de page sur Figma

1 / Début Projet Libre (5 minutes)
  • Expliquez aux Makers qu’ils vont créer une application mobile innovante et pratique, répondant à un besoin spécifique. Encouragez-les à laisser libre cours à leur imagination pour concevoir quelque chose de vraiment original et utile.
  • Contrainte technique: Informez-les qu’ils devront utiliser au moins un composant de Thunkable dans leur application. Cela les aidera à se familiariser avec l’outil et à explorer ses fonctionnalités.
 
2/ Brainstorming initial (15 minutes) 
  • Commencez par une séance de brainstorming pour aider les Makers à générer des idées pour leur application. Encouragez-les à partager leurs concepts et à en discuter en groupe pour enrichir leur réflexion.
 
3 / Réflexion personnelle (10 minutes)
  • Invitez les Makers à prendre quelques minutes pour réfléchir et sélectionner une idée qui les passionne et qu’ils souhaiteraient développer et créer en une application mobile.
  • Préciser que dans quelques minutes, ils découvriront un nouvel outil pour mettre en forme leurs idées et créer des wireframes pour votre application.
 
4 / Introduction à Figma  (5 minutes)
  • Présentation rapide de Figma : un outil de design web puissant et intuitif.
  • Se connecter à Figma
 
5 / Premiers pas avec Figma (10 minutes) 
  • Présentation de l’interface de Figma : panneaux, barre d’outils, et canvas.
  • Création d’un nouveau projet dans Figma.
  • Exploration des fonctionnalités de base : créer des formes, modifier la couleur et la taille.
  • Laissez les Makers expérimenter
 
6 / Création d’une page simple (15 minutes) 
  • Utilisation de groupe pour organiser les éléments du design.
  • Conception d’une page d’accueil pour un site web.
  • Utilisation de grilles pour aligner les éléments.
  • Création de boutons et de liens.
  • Laissez les Makers expérimenter
Retour en haut