Figma - créer une Landing page professionnelle

Objectifs

• Comprendre les principes de conception d'une landing page


• Créer un wireframe fonctionnel


• Concevoir une interface UI claire et cohérente


• Adapter sa maquette en responsive (mobile / tablette)


• Réaliser un prototype animé simple

Programme de la formation

Test de positionnement

• Évaluation des connaissances initiales et des objectifs individuels

Module 1 – Introduction

• Qu'est-ce qu'une Landing Page ?

• Les différents types de blocs d'une Landing Page

• 3 sources d'inspiration professionnelles

• Présentation de l'outil Figma

Module 2 – Premier jet (Wireframe)

• Lancement du projet de cours : landing page pour une salle de CrossFit

• Réalisation d'un wireframe fonctionnel (Fichier téléchargeable : Wireframe.excalidraw)

Module 3 – Création de la Landing Page (UI)

• Création du header et de la section "Hero"

• Introduction aux composants dans Figma

• Construction progressive des sections

• Finalisation de la page

• Application de corrections mineures

Module 4 – Responsive Design

• Adaptation de la maquette pour tablettes

• Adaptation pour smartphones

• Réflexions UX/UI autour du responsive

Module 5 – Prototyping (Bonus)

• Création et animation d'un menu interactif

• Maquette complète CrossFit (fichier Figma téléchargeable)

Test final

• Évaluation des compétences acquises

• Remise d'une attestation de fin de formation

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique