- Cet formation est passé
Objectifs : Permettre aux participants de maîtriser Webflow pour transformer des maquettes UX/UI en sites web responsive et performants, sans recourir au code. Ils apprendront à concevoir, optimiser et publier des projets professionnels tout en respectant les normes SEO et réglementaires.
Formation disponible
présentiel, individuel
Formation disponible présentiel, individuel.
Comment souhaitez vous suivre cette formation ?
Cette formation est disponible en présentiel, à distance ou en cours individuels. Suite aux changements récents du fonctionnement des comptes CPF, si nos liens CPF renvoient sur une erreur temporaire, merci de nous contacter au 04 42 31 43 55
Nous n'avons actuellement pas de dates, merci de nous contacter pour plus d'informations
Comment souhaitez vous suivre cette formation ?
Cette formation est disponible en présentiel, à distance ou en cours individuels. Suite aux changements récents du fonctionnement des comptes CPF, si nos liens CPF renvoient sur une erreur temporaire, merci de nous contacter au 04 42 31 43 55
Nous n'avons actuellement pas de dates, merci de nous contacter pour plus d'informations
Pourquoi Webflow ?
• les utilisateurs de Figma, pourront approfondir leurs compétences en transformant directement leurs maquettes en sites web responsive, sans avoir besoin de coder. Webflow reprend les principes de Figma (grilles, styles, composants) et répond aux attentes des entreprises modernes, où la rapidité et l’autonomie sont devenues essentielles.
Présentation
• Présentation de Webflow et de sa communauté.
• Comprendre l’approche no-code et ses avantages pour les projets web.
• Où trouver de l’aide en ligne (forums, Webflow University, ressources externes).
• Comment choisir son hébergement et son nom de domaine.
• Découverte de l’interface Webflow et ses principales sections.
Débuter avec Webflow
• Créer un compte Webflow.
• Découverte du tableau de bord et gestion des projets.
• Créer un nouveau projet : choisir et personnaliser un template ou partir de zéro.
• Introduction à l’interface Designer :
o Les panneaux (Styles, Navigator, Pages, CMS).
o Ajouter des éléments de base : sections, div blocks, conteneurs.
• Paramétrer le projet Webflow :
o Les paramètres généraux.
o Configuration des Breakpoints pour le responsive design.
Créer l’architecture du site
• Structurer une page avec une hiérarchie logique : Header, Footer, Body.
• Les éléments principaux :
o Sections, conteneurs, grilles, Flexbox.
o Introduction aux classes et à la réutilisation des styles.
• Créer les contenus du site :
o Les pages statiques et leur utilisation.
o Les collections dynamiques avec le CMS Webflow.
o Configurer des taxonomies et relations entre les collections.
• Gestion du menu principal :
o Optimisation pour la navigation.
o Ajout de liens dynamiques et spécifiques (ancrages, external links).
Le design
• Appliquer des styles globaux (typographies, couleurs).
• Introduction aux grilles CSS et à Flexbox pour la mise en page.
• Découvrir les interactions et animations Webflow :
o Animer les éléments au scroll, au clic, ou au survol.
o Intégration des interactions complexes.
• Création d’une maquette responsives : ajustements pour les breakpoints mobile, tablette, desktop.
• Importer et gérer des polices personnalisées.
• Gestion des assets :
o Optimiser les images pour le web.
o Utilisation de la bibliothèque d’assets Webflow.
Les images et médias
• L’importance d’optimiser les images :
o Comprendre la notion de ratio.
o Réduire le poids des images.
o Importation et utilisation dans Webflow.
• Intégration de vidéos et médias interactifs.
• Utilisation des outils d’intégration (YouTube, Vimeo, Lottie).
Bonnes pratiques SEO
• Configurer les balises SEO dans Webflow : meta titles, descriptions.
• Optimisation des contenus pour le référencement :
o Les heading tags (H1, H2, etc.).
o Balises ALT des images.
o Gestion des URL et des redirections.
• Introduction à l’optimisation des performances Webflow (minification CSS/JS, lazy loading).
Aller plus loin avec Webflow
• Ajouter des fonctionnalités avancées :
o Intégration de formulaires personnalisés.
o Connexion à des outils externes via Zapier ou Make.
• Respecter les lois (RGPD) :
o Ajouter des bannières cookies.
o Gestion de la politique de confidentialité.
o Mentions légales.
• Introduction aux outils tiers pour enrichir Webflow (Plug-ins, API).
• Introduction au e-commerce avec Webflow.
Sécurité, sauvegarde et publication
• Prévisualisation et validation du site.
• Processus de publication : hébergement avec Webflow
• Hosting ou exportation du code.
• Sauvegarde du projet : gestion des versions avec Webflow.
• Conseils pour sécuriser un projet et prévenir les erreurs courantes.
• Migrer un site Webflow vers un autre domaine.
