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 / 22 heures
Prix : 1 600 € HT
Réf. : W09
(21 heures collectives + 1 heure de mentorat distanciel)

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 l’environnement Webflow
  • Se repérer et naviguer dans Webflow
  • Préparer l'intégration dans Webflow
  • Créer et manipuler des bases de données
  • Améliorer l’expérience de navigation
  • Publier son site

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 ou d'avoir suivi notre formation « Culture Web : environnement de production et tendances ». Une connaissance d’un outil de prototypage (Figma, XD, Sketch) et des bases en HTML/CSS faciliteront l’accès à cette formation.

Programme

Comprendre l’environnement Webflow

  • Rappeler la notion de CMS (Content Managing System)
  • Situer Webflow dans la chaîne de production web
  • Lister les ressources utiles : Webflow University, communautés actives…
  • Comparer les différentes tarifications proposées
  • Anticiper la création (passerelles avec Figma, XD…)
  • Identifier la relation Webflow / HTML / CSS
  • Configurer et héberger un premier site : les bonnes pratiques
-> Études de cas

Se repérer et naviguer dans Webflow

  • Distinguer et expérimenter les outils
  • Créer une page
  • Prendre en main l’inspecteur pour structurer sa page
  • Placer et dimensionner du texte / des images dans la page
  • Organiser les médias du projet
  • Visualiser les différents formats d’écrans grâce au moteur responsive
  • Utiliser les « prebuilts components » (template) pour gagner du temps
-> Exercice : créer une page d’accueil

Préparer l'intégration dans Webflow

  • Reconnaître les différents composants et identifier leurs usages
  • Utiliser les combo-class
  • Créer un guide de styles
  • Hiérarchiser les éléments grâce au flexbox 
  • Configurer le positionnement des blocs et éléments
-> Exercice : enrichir et décliner la page d’accueil  

Créer et manipuler des bases de données

  • Rappeler les principes d’une base de données
  • Créer une première base de données
  • Créer le template associé à la base de données
  • Paramétrer l’affichage des champs de la base de données
  • Créer, publier et gérer du contenu dynamique
-> Exercice : intégrer une base de données à un site  

Améliorer l’expérience de navigation

  • Créer des templates d’éléments
  • Manipuler des pages CMS
  • Concevoir des animations simples
  • Créer un formulaire de contact
  • Configurer les options de bloc
-> Exercice : compléter le site en vue de sa publication

Publier son site

  • Identifier et corriger les erreurs d’intégration
  • Publier son site sur un domaine personnalisé
  • Mettre à jour le contenu du site au quotidien
  • Gérer les droits d’accès pour l’édition de contenus
  • Créer une sauvegarde
-> Exercice : mise en place d’une check-list et d’un plan d'action opérationnel

Artistes / Auteurs affiliés à la maison des artistes ?

Découvrez nos conditions préférentielles

Profil de l’intervenant

Product Designer avec plus de 3 ans d’expérience en animation de formation.

Les + de Swash

Ressources

  • Supports de cours dématérialisés
  • Supports vidéo (enregistrements, pendant la session, d’une sélection de démonstrations réalisées par l’intervenant)
  • Abonnement de 3 mois à tuto.com
  • Abonnement de 6 mois (2 numéros) à étapes:
  • Inscription au forum des swashers
Image
étapes:
Chaque participant bénéficie de 6 mois d'abonnement à étapes (2 numéros)
Image
Tuto.com
Chaque participant bénéficie de 3 mois d'abonnement à tuto.com

Partager :

Image

Découvrez notre magazine !

Interviews, avis d'experts, inspiration : 40 pages pour explorer notre univers et nos domaines de compétences.

Modalités en présentiel

Parcours pédagogique :

Quiz de positionnement ❯ 3 jours présentiels continus ❯ Mentorat distanciel (1 heure en tête à tête avec l'intervenant)

Méthode pédagogique :

Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, feedbacks personnalisés, mentorat

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 3 classes virtuelles discontinues (3 x 1 jour)  Mentorat distanciel (1 heure en tête à tête avec l'intervenant)

Méthode pédagogique :

Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, travail individuel inter-sessions, feedbacks personnalisés, mentorat

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)

Dernière mise à jour le 28 avril 2023