Contenu de la formation :
- Introduction à Webflow :
- Qu’est-ce que Webflow ? : Webflow est une plateforme No Code permettant de créer des sites web entièrement personnalisables grâce à une interface visuelle, sans avoir besoin de coder.
- Pourquoi utiliser Webflow ? : Webflow est idéal pour les designers et créatifs non-développeurs, car il permet de concevoir des sites professionnels avec un contrôle total sur le design et l’expérience utilisateur, tout en générant du code propre en arrière-plan.
- Présentation de l’interface Webflow :
- Introduction à l’éditeur visuel de Webflow, y compris la barre de navigation, le panneau de styles et les options de mise en page.
- Gestion des projets, pages, et structure de dossiers.
- Création d’un Site Vitrine sans Coder avec Webflow :
- Structure d’un projet Webflow :
- Comprendre comment organiser un projet dans Webflow (pages, sections, conteneurs, colonnes).
- Utilisation des éléments de base (en-têtes, paragraphes, images, boutons) pour structurer le contenu.
- Grille et mise en page flexible :
- Utilisation du système de grille visuel de Webflow pour organiser les éléments en colonnes et lignes.
- Introduction aux flexbox pour des mises en page adaptatives et dynamiques.
- Création des pages d’un site vitrine :
- Mise en place des pages essentielles : Page d’accueil, À propos, Services, Contact.
- Utilisation des sections réutilisables (symboles) pour standardiser les éléments de conception comme les en-têtes et les pieds de page.
- Personnalisation du Design avec Webflow :
- Gestion des styles CSS sans coder :
- Utilisation du panneau de styles pour ajuster les couleurs, typographies, espacements, marges et bordures.
- Gestion des classes CSS directement via l’interface visuelle pour réutiliser des styles et créer des composants uniformes.
- Création de mises en page responsives :
- Apprentissage des techniques pour adapter un site vitrine aux différents types d’appareils (desktop, tablette, mobile) avec les points de rupture visuels de Webflow.
- Utilisation des classes pour ajuster les styles en fonction des écrans, notamment les ajustements de typographie et de disposition.
- Intégration d’Animations et de Transitions :
- Animations d’interaction (Interactions 2.0) :
- Utilisation des outils d’interaction de Webflow pour créer des animations sans code, basées sur les actions des utilisateurs (scrolling, survol, clics).
- Création d’effets comme l’apparition en douceur, les transformations, et les animations de mouvement.
- Création de transitions fluides :
- Appliquer des transitions douces entre les états d’éléments pour améliorer l’expérience utilisateur, comme des effets de hover ou de changement de couleur.
- Utilisation des animations Lottie :
- Intégration d’animations vectorielles Lottie pour ajouter des effets visuels interactifs et légers sur les performances du site.
- Customisation des animations en fonction des interactions utilisateurs (défilement, clics).
- Intégrations et Automatisations avec Webflow :
- Utilisation de Zapier pour automatiser les flux de travail :
- Introduction à Zapier, un outil d’automatisation No Code, pour connecter Webflow à d’autres applications (envoi d’e-mails automatiques après soumission de formulaire, intégration avec Google Sheets, etc.).
- Automatisation des tâches pour réduire la gestion manuelle du site, par exemple, la synchronisation des formulaires Webflow avec des outils CRM comme HubSpot.
- Intégration de services externes :
- Ajout de plugins et d’intégrations tierces, comme les cartes Google Maps, les vidéos YouTube, ou l’intégration de formulaires via MailChimp.
- Utilisation de Webflow CMS pour créer des contenus dynamiques connectés à des bases de données ou des intégrations avec des outils externes.
- Gestion de Contenu Dynamique avec le CMS Webflow :
- Introduction au CMS Webflow :
- Apprendre à utiliser les collections CMS pour gérer des contenus dynamiques comme des blogs, portfolios, témoignages, ou produits.
- Création de collections personnalisées pour des pages répétitives (par exemple, des services, des projets ou des membres d’équipe).
- Pages dynamiques basées sur des collections :
- Utilisation des modèles de collection pour créer automatiquement des pages dynamiques à partir des contenus de base de données.
- Mise à jour automatique des pages vitrines lorsqu’un nouveau contenu est ajouté ou modifié dans la collection.
- Hébergement et Gestion du Site avec Webflow :
- Hébergement intégré sur Webflow :
- Utilisation de l’hébergement intégré de Webflow pour déployer rapidement un site vitrine avec un certificat SSL gratuit et des performances optimisées.
- Configuration des paramètres de domaine personnalisé et gestion des DNS pour relier un domaine propre.
- SEO et performance :
- Optimisation des balises SEO (meta descriptions, titres, balises ALT) directement dans Webflow.
- Configuration des options de performance, telles que la minification des fichiers CSS et JS, et l’optimisation des images pour garantir un chargement rapide.
- Accessibilité et SEO avec Webflow :
- Optimisation pour les moteurs de recherche :
- Création de balises ALT pour les images, balises meta pour les pages, et optimisation des titres de page pour améliorer le référencement.
- Prévisualisation et optimisation du contenu pour le partage sur les réseaux sociaux avec Open Graph et Twitter Cards.
- Accessibilité web :
- Mise en œuvre des meilleures pratiques pour garantir que le site soit accessible à tous les utilisateurs, y compris ceux avec des handicaps (navigation clavier, balises ARIA).
- Projet Pratique : Création d’un Site Vitrine avec Webflow :
- Réalisation d’un projet de site vitrine complet :
- Conception d’une page d’accueil engageante avec animations, sections de services, et boutons d’appel à l’action (CTA).
- Création d’un portfolio ou d’une galerie d’images dynamique pour présenter des projets.
- Mise en place d’un formulaire de contact intégré avec automatisations via Zapier.
- Test du site sur différents appareils pour s’assurer qu’il est responsive et optimisé pour le mobile.
Objectif de la formation :
L’objectif de cette formation est de permettre aux participants de
concevoir des sites vitrines modernes et responsives sans coder grâce à Webflow. Ils apprendront à manipuler l’interface visuelle de Webflow pour structurer, personnaliser et animer des sites vitrines professionnels tout en optimisant l’expérience utilisateur sur tous les appareils.
À la fin de la formation, les participants seront capables de :
- Créer et personnaliser des sites vitrines en utilisant les outils No Code de Webflow.
- Intégrer des animations et des interactions dynamiques pour améliorer l’interface utilisateur.
- Utiliser les automatisations et intégrations pour connecter le site à des services externes et simplifier la gestion.
Niveau :
- Débutant à intermédiaire : Cette formation s’adresse aux créateurs de sites vitrines, designers, marketeurs et entrepreneurs ayant peu ou pas d’expérience en développement web, mais souhaitant créer des sites modernes et interactifs sans coder.
Exemple d’outils utilisés :
- Webflow :
- Plateforme No Code utilisée pour concevoir, animer et héberger des sites vitrines responsives.
- Zapier :
- Outil d’automatisation No Code qui connecte Webflow à des services tiers pour automatiser les flux de travail (formulaires, CRM, e-mails).
- Lottie :
- Utilisation des animations Lottie pour ajouter des effets interactifs et fluides à des éléments visuels sans surcharger la page.
Durée de la formation :
- Formation intensive : 3 à 5 jours avec des sessions de 4 à 6 heures par jour, comprenant des démonstrations pratiques et des exercices.
- Formation étendue : 4 à 6 semaines avec des cours hebdomadaires et des exercices pratiques à réaliser entre les sessions.
Projets pratiques :
Les participants réaliseront des projets pratiques tout au long de la formation, notamment :
- Création d’un site vitrine personnalisé avec Webflow, comprenant des animations et des interactions utilisateur.
- Intégration de formulaires dynamiques et automatisation des tâches avec Zapier pour une gestion simplifiée.
- Optimisation des pages pour le SEO et la performance, avec mise en ligne du site sur un domaine personnalisé.
Cette formation est idéale pour les créatifs, designers, et entrepreneurs souhaitant maîtriser la conception de sites vitrines modernes et interactifs sans avoir besoin de compétences en programmation.
