Développement Web
Formation Framer, création de sites ultra modernes & animés
Cette formation permet de concevoir, prototyper et publier des sites web modernes, interactifs et animés avec Framer dans une logique professionnelle.
Format
Intra-entreprise
Durée recommandée
≈ 21 à 35 heures
Démarrage
Sous 15 jours
Sur-mesure
Programme co-construit avec le formateur
Pour qui ?
- ›Webdesigners, UI designers, graphistes ou créateurs digitaux souhaitant concevoir des sites modernes sans développement avancé.
- ›Freelances, responsables communication, équipes marketing ou profils no-code amenés à créer des sites vitrines, landing pages ou mini-sites à forte qualité visuelle.
- ›Professionnels du digital souhaitant produire des expériences web plus fluides, animées, responsives et facilement administrables avec Framer.
Prérequis
- ›Maîtriser les usages courants de l’outil informatique et de la navigation web.
- ›Avoir une culture générale du web, de la mise en page et du design d’interface est recommandé.
- ›Une première sensibilité au design UI, au responsive ou aux outils de création visuelle constitue un atout.
Objectifs pédagogiques
- ›Comprendre l’environnement Framer et son positionnement dans une chaîne de production web no-code orientée design.
- ›Concevoir des pages et des interfaces modernes en structurant correctement les sections, composants, styles et contenus.
- ›Créer des expériences web animées, fluides et responsives dans le respect des bonnes pratiques d’ergonomie et de performance.
- ›Gagner en autonomie dans la gestion des composants réutilisables, des effets visuels, des interactions et des paramètres de publication.
- ›Intégrer les bonnes pratiques de qualité visuelle, d’accessibilité, de hiérarchisation de l’information, de référencement naturel et de maintenance courante.
- ›Faire évoluer un site Framer de manière durable en articulant design, contenu, animation et logique de production professionnelle.
Programme détaillé
9 modules, construits autour de vos cas réels.
Durée recommandée ≈ 21 à 35 heures, modulable selon le rythme du groupe et vos contraintes intra-entreprise.
01Prendre en main Framer et comprendre sa logique de création web
Chapitres- Comprendre le positionnement de Framer dans l'écosystème des outils web no-code orientés design.
- Identifier les zones de travail : canvas, panneau des calques, réglages, pages et bibliothèque de composants.
- Comprendre la logique de conception visuelle, de structuration des blocs et de passage du design au site publié.
- Distinguer maquette statique, prototype interactif et site réellement mis en ligne.
- Adopter une méthode de travail pour concevoir, tester, corriger et faire évoluer un site.
- Configurer son espace de projet, gérer les pages et organiser ses premiers calques proprement.
02Structurer des pages modernes et cohérentes
Chapitres- Construire des pages à partir de sections, conteneurs, frames et blocs de contenus.
- Maîtriser le système de stack et d'auto-layout pour gérer alignements et espacements.
- Organiser l'information selon une hiérarchie visuelle claire adaptée aux usages web actuels.
- Utiliser les éléments de base : titres, textes, images, boutons, liens, cartes et icônes.
- Réaliser des mises en application encadrées autour de pages vitrines et de landing pages.
03Construire une direction visuelle et un design system exploitable
Chapitres- Définir des tokens de couleurs, des styles de texte et des variables typographiques réutilisables.
- Structurer une bibliothèque de composants pour accélérer la production et homogénéiser les pages.
- Créer des variantes de composants selon les contextes d'usage et les besoins de communication.
- Mettre en place des conventions de nommage et d'organisation pour faciliter la maintenance.
- Maintenir une cohérence visuelle durable entre les différentes pages du site.
- Articuler la direction artistique avec les contraintes de lisibilité et de production.
04Concevoir des sites responsives adaptés à tous les écrans
Chapitres- Comprendre les breakpoints desktop, tablette et mobile et leur impact sur la conception.
- Ajuster structures, tailles, espacements et comportements de stack selon chaque écran.
- Prioriser contenus et actions pour préserver le confort d'usage sur tous les supports.
- Repérer les erreurs fréquentes de responsive design et les corriger méthodiquement.
- Contrôler la cohérence visuelle et fonctionnelle des pages sur plusieurs contextes d'affichage.
05Créer des animations et interactions modernes
Chapitres- Comprendre le rôle des animations dans la perception de qualité et de fluidité d'un site.
- Configurer des effets d'apparition au scroll, transitions et changements d'état au survol.
- Mettre en place des micro-interactions sur boutons, cartes et éléments de navigation.
- Exploiter les variants et les effects pour animer sections et composants de façon lisible.
- Gérer le rythme, l'intensité et la hiérarchie des animations pour éviter les effets excessifs.
- Réaliser des mises en application encadrées autour d'effets adaptés à un usage professionnel.
06Gérer des contenus dynamiques avec le CMS de Framer
Chapitres- Comprendre le fonctionnement des collections CMS et leur intérêt pour un site évolutif.
- Créer une collection, définir ses champs et alimenter ses entrées de contenu.
- Construire des pages de liste et des pages de détail connectées à une collection.
- Filtrer, trier et paginer les contenus affichés selon les besoins du site.
07Produire plus vite avec les composants avancés et contenus réutilisables
Chapitres- Créer des composants modulaires facilitant duplication, maintenance et évolution du site.
- Définir variantes, propriétés et états récurrents pour rationaliser la production.
- Structurer des sections prêtes à l'emploi : hero, navigation, cartes et appels à l'action.
- Éviter les dérives de construction qui complexifient le projet ou nuisent à sa cohérence.
- Mettre en place une organisation claire pour faire évoluer le site dans la durée.
08Optimiser la qualité web, le SEO et l'accessibilité avant publication
Chapitres- Organiser les contenus textuels et visuels selon une logique de lisibilité et de hiérarchisation.
- Préparer images et médias en tenant compte de la qualité d'affichage et des performances.
- Configurer les balises titres, meta et propriétés Open Graph pour le référencement naturel.
- Améliorer l'accessibilité : contrastes, textes alternatifs, navigation claire et lisibilité.
- Mettre en place une routine de contrôle qualité avant mise en ligne ou mise à jour.
- Repérer les erreurs nuisant à l'expérience utilisateur, au référencement ou à la performance.
09Publier, administrer et faire évoluer un site Framer
Chapitres- Comprendre les options de prévisualisation, de mise en ligne et de connexion d'un domaine.
- Gérer les mises à jour de contenus, de composants, de pages et d'animations dans la durée.
- Identifier les points de vigilance liés à la maintenance et à la cohérence structurelle.
- Prévenir les erreurs courantes liées aux modifications de composants, de responsive ou d'effets.
Évaluation & suivi des acquis
Mill-Forma est certifié Qualiopi. Chaque session respecte les six modalités d'évaluation et de suivi suivantes :
- Feuille de présence émargée quotidiennement par le formateur et chaque stagiaire
- Émargement sécurisé via la plateforme Dendreo (suivi numérique certifié)
- Questionnaire d'auto-positionnement préalable pour évaluer niveau et attentes
- Évaluations formatives et sommatives tout au long de la formation
- Mises en situation pratiques et exercices professionnels en conditions réelles
- Attestation de fin de stage et certificat de réalisation remis au stagiaire
Certification délivrée
Attestation de fin de stage + certificat de réalisation
Délai d'accès
Sous 15 jours après validation du devis
Accessibilité PSH
Adaptations possibles en situation de handicap. En savoir plus.
Méthodes pédagogiques
- ›Alternance d'apports théoriques et de mises en pratique
- ›Études de cas issues de projets clients réels
- ›Support pédagogique numérique remis à chaque stagiaire
- ›Formateur expert métier en activité
Prochaine étape
Construire votre formation Framer, création de sites ultra modernes & animés
Un échange de 20 minutes suffit pour cadrer vos enjeux et la session. Devis personnalisé sous 48h, démarrage sous 15 jours.
- Réponse sous 24h ouvrées
- 01 85 71 00 29
Pour aller plus loin
Formations associées
Développement Web≈ 21 à 35 heures·Intra/Inter
PrestaShop
Maîtriser PrestaShop pour créer et gérer une boutique e-commerce performante : catalogue, paiement, livraison, SEO, modules, personnalisation thème et marketing.
Voir la fiche
Développement Web≈ 14 à 28 heures·Intra/Inter
Webflow CMS & interactions avancées
Cette formation permet de structurer des contenus dynamiques et de concevoir des expériences interactives avancées dans Webflow sans développement complexe.
Voir la fiche
Développement Web≈ 21 à 35 heures·Intra/Inter
Webflow, création de sites professionnels sans code
Cette formation permet de concevoir, structurer et publier des sites professionnels avec Webflow dans une logique de production sans code.
Voir la fiche
Développement Web≈ 21 à 35 heures·Intra/Inter
WooCommerce
Créer, administrer et optimiser une boutique en ligne WordPress avec WooCommerce, de la configuration au pilotage des ventes et de la logistique.
Voir la fiche
Développement Web≈ 14 à 28 heures·Intra/Inter
Wordpress avec Gutenberg
Cette formation permet de concevoir, structurer et faire évoluer des sites WordPress avec Gutenberg dans une logique de production professionnelle.
Voir la fiche
Développement Web≈ 21 à 35 heures·Intra/Inter
Wordpress Création de blocs Gutenberg custom (ACF / blocks natifs)
Cette formation permet de concevoir, développer et maintenir des blocs Gutenberg sur mesure avec ACF et les API natives de WordPress.
Voir la fiche