Découverte de Framer et bases du design web

Introduction à Framer et au design web

• Présentation de Framer : historique, avantages (no-code, animations, collaboration).
• Différences avec d’autres outils (WordPress, Wix, Figma).
• Création d’un compte Framer er exploration de l’interface
• Notions de base du design web :
  • Hiérarchie visuelle, UX/UI (expérience utilisateur).
  • Les éléments clés d’une landing page (hero section, CTA, footer).

Prise en main de l’interface

• Créer un nouveau projet.
• Présentation du canvas, des layers, des propriétés (position, taille, couleurs).
• Utilisation des outils de base : texte, images, formes, icônes.
• Création d’une maquette simple
• Dupkication, alignement et organisation des éléments

Travail sur les styles et composants

• Typographie : choix des polices, tailles, poids.
• Couleurs : palettes, contrastes, accessibilité.
• Espacement et alignement (grilles, margins, padding).
• Création d’une palette de couleurs et d’une hiérarchie typographique
• Application de styles cohérents à plusieurs éléments
• utilisation des composants réutilisables (ex : boutons, cartes)

Création d’une première section

• Construction d’une hero secteion (titre, sous titre, bouton, image de fond)
• Ajout d’une section « A propos » avec du texte et une image

Approfondissement et interactivité

Révision et questions

• Retour sur les points bloquants de la veille.
• Vérification des projets en cours.

Animations et transitions

• Principes des animations (durée, easing, déclencheurs).
• Exemples d’animations utiles pour une landing page (appear on scroll, hover).
• Animation de l’apparition des éléments (ex : gade-in, slipe-up)
• Ajout des effets de survol (hover) sur les boutons
• Animation de la hero section (ex: titre qui apparaît en premier, puis bouton)

Responsive design

• Adaptation mobile vs desktop.
• Breakpoints et media queries dans Framer.
• Adaptation de la landing page pour mobile (redimensionnement, empilement des sections).
• Test du rendu sur différents appareils (outils intégrés à Framer).
• Correction des problèmes d’affichage sur mobile.

Ajout de sections avancées

• Exemples de sections à créer :
  • Galerie d’images (avec lightbox).
  • Témoignages clients (carrousel ou grille).
  • Formulaire de contact (intégration basique).

Finalisation, publication et projet personnel

Révision et corrections

• Retour sur les projets en cours.
• Aide individualisée pour résoudre les blocages.

Fonctionnalités avancées

• Intégration de vidéos ou GIFs.
• Utilisation de Framer CMS (pour gérer du contenu dynamique, ex: blog ou portfolio).
• SEO basique : balises title, meta descriptions.
• Ajout d’une section « Projets » avec des liens vers des pages externes.

Publication et export

• Publication d’un site sur un sous-domaine Framer (gratuit).
• Export du code pour l’héberger ailleurs (ex: Netlify, Vercel).
• Vérification des performances (outils comme Google PageSpeed Insights).

Dernière mise à jour de la fiche : 12.08.2026