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 600 € 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 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.

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
  • Inscription au forum des swashers
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 É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 3 classes virtuelles discontinues (3 x 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)

Dernière mise à jour le 22 septembre 2023