Toute l'équipe de Swash vous souhaite d'excellentes fêtes de fin d'année !
Initiation
Webflow : réussir sa prise en main
De la conception à la mise en ligne : s’initier à la création de sites Web
3 jours / 21 heures
Prix : 1 800 € HT
Réf. : W09
Compétences visées
Définir la place de Webflow dans le processus d’intégration de sites Web et mettre en œuvre un flux de production efficace pour réaliser un site de A à Z.
Objectifs
- Comprendre les fondamentaux de Webflow et son interface
- Se lancer dans la production
- Concevoir et structurer un site responsive
- Animer des éléments avec les interactions et animations
- Comprendre les bases du SEO avec Webflow
- Publier et maintenir son site web
Public concerné
Cette formation s’adresse aux créatifs (Directeurs Artistiques, Graphistes), aux UI / UX / product designers ou aux professionnels de la communication / du marketing.
Prérequis
Il est nécessaire d’avoir une très bonne culture Web (vocabulaires, métiers, bases UI/UX ). Une connaissance d’un outil de prototypage comme Figma et en intégration HTML/CSS facilitera l’accès à cette formation.
Programme
Comprendre l’environnement Webflow et prendre en main l’interface
- Situer Webflow et le no-code
- Différencier Webflow des autres CMS (WordPress, Wix…)
- Comparer les différentes tarifications proposées
- Anticiper la création (passerelles avec Figma, XD…)
- Distinguer et expérimenter les outils
- Le Designer : où tout se construit
- Le Navigator : organisation des éléments
- Le Style Panel : gestion du design et du positionnement
- Le Interactions : pour animer les éléments
- Les espaces CMS et E-commerce
-> Études de cas / Création et paramétrage d’un projet (unités, breakpoints, typographie globale))
Se lancer dans la production
- Identifier la structure d’une page Webflow
- HTML et CSS dans Webflow (sans coder)
- Comprendre les éléments de structure : Sections, Containers, Divs
- Différences entre Class, ID et Combo Class
- Créer les premiers éléments de design
- Ajouter du texte, des images et des boutons
- Utiliser les couleurs et typographies globales
-> Exercice : création d’une première page simple
Concevoir et structurer un site responsive
- Appliquer les principes du responsive design
- Créer une structure optimisée pour tous les formats d’écrans
- Utiliser les breakpoints dans Webflow
- Tester et optimiser l’affichage mobile
- Utiliser Flexbox et Grid
- Prise en main de Flexbox
- Introduction à CSS Grid et application dans Webflow
-> Exercice : reproduire une landing page responsive
Animer des éléments avec les interactions et animations
- Expérimenter les interactions dans Webflow
- Différence entre interactions et animations
- Animation au scroll, au hover et au clic
- Créer des effets avancés
- Effet parallax et scroll triggers
- Apparition progressive d’éléments
- Animations de menu et navigation
-> Exercice : création d’une section animée et de composants interactifs
Intégrer les bases du SEO dans Webflow
- Optimiser le référencement naturel (SEO)
- Classifier les balises SEO (Title, Meta Description, H1, H2…)
- Identifier quelques bonnes pratiques pour améliorer le SEO
- Agir sur les performances Web
- Optimisation des images et assets
- Tester et améliorer la vitesse du site
-> Exercice : analyse et amélioration du SEO d’une page Webflow
Publier et maintenir son site web
- Héberger et publier son site
- Ajouter un nom de domaine
- Publier en staging ou en production
- Anticiper les mises à jour et la maintenance
- Modifier et mettre à jour un site en production
-> Exercice : mise en ligne d’un site Webflow
Nos prochaines sessions
Artistes / Auteurs affiliés à la maison des artistes ?
Découvrez nos conditions préférentielles
Évaluation
L'atteinte des objectifs
a été évaluée par les apprenants à
a été évaluée par les apprenants à
5
/5
Moyenne des résultats obtenus depuis
début 2023
début 2023
Profil de l’intervenant
UI Designer, spécialiste no-code, avec plus de 3 ans d’expérience en animation de formation.
Ressources
- Supports de cours dématérialisés
- Abonnement de 3 mois à tuto.com
- Accès illimité par mail à la hotline Swash
Tuto.com
Chaque participant bénéficie de 3 mois d'abonnement à tuto.com
Modalités en présentiel
Parcours pédagogique :
Quiz de positionnement ❯ 3 jours présentiels continus ❯ Évaluation des acquis
Méthode pédagogique :
Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, feedbacks personnalisés
Moyens techniques :
- 1 poste par participant (Mac ou PC, selon votre choix), fourni par nos soins (utilisation du compte Webflow de l'apprenant)
- Poste de l’intervenant relié à un grand écran ou vidéoprojecteur
Modalités en distanciel
Parcours pédagogique :
Quiz de positionnement ❯ classes virtuelles discontinues (2 jours + 1 jour) ❯ Évaluation des acquis
Méthode pédagogique :
Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, travail individuel inter-sessions, feedbacks personnalisés
Moyens techniques :
- Classe virtuelle créée par nos soins
- Chaque apprenant participe à la session avec son ordinateur, connecté à Internet, et équipé :
- d’un micro et d’une caméra
- d'un compte Webflow
- d'un double écran (recommandé mais non nécessaire)
Méthodes d'évaluation
- Validation des acquis pendant la formation grâce à des quiz et à la réalisation d’exercices pratiques
- Suivi d'acquisition des objectifs pédagogiques par l'intervenant
- Évaluation à chaud (remplie en fin de formation) et à froid (à 60 jours)
