Webflow — Créer un site web pour créatifs (Low Code)

Objectifs du cours

Fini les allers-retours interminables entre conception et intégration : avec Webflow, les équipes créatives conçoivent et publient des sites pixel-perfect sans écrire de code, tout en respectant l’UX, la performance et le SEO. En trois jours, vous passez d’un brief à un site opérationnel : structure propre, CMS dynamique, interactions maîtrisées, suivi analytique et mise en ligne sécurisée.

À l’issue de la formation, les participantes seront capables de :

• Expliquer les concepts et technologies web utiles (HTML/CSS, responsive, performance).
• Concevoir des pages et des sites par des méthodologies centrées utilisateurs (UX/UI).
• Utiliser l’éditeur Webflow (Low Code/No Code) pour construire, animer et maintenir un site.
• Optimiser les images et maîtriser les points clés du SEO on-page.
• Publier un site sur un domaine personnalisé avec SSL, suivi Analytics et bonnes pratiques de sécurité.

Public

• Graphistes, directeurs artistiques, webdesigners, chefs de projet communication/marketing, ou toute personne souhaitant concevoir des pages, sites ou landing pages sans programmation.
  

Prérequis

• Être à l’aise sur Mac/PC. Aucune connaissance en langage de programmation n’est requise. (Une pratique d’Excel/Google Sheets est un plus.)  
  

Contenu du cours

Partie 1 — Repères web & positionnement de Webflow

• Fondamentaux utiles : structure HTML, styles CSS, responsive/breakpoints.
• Positionnement : Webflow vs CMS/constructeurs (forces, limites, export de code).
• Cadrage projet : objectifs, arborescence, zoning rapide.

Partie 2 — Prise en main de l’interface

• Espaces clés : tableau de bord, réglages de projet, assets, pages, collections (CMS).
• Hiérarchie & mise en page : sections, conteneurs, grid/flex, classes/combo-classes.
• Atelier (pertinent) : création du projet + squelette de la page d’accueil.

Partie 3 — Design système (styles & composants)

• Styles globaux : échelle typo, couleurs, styles de base (body, headings, links).
• Composants : symboles/éléments réutilisables, classes utilitaires.
• Organisation : conventions de nommage, cohérence visuelle.

Partie 4 — Responsive avancé

• Approche mobile-first vs desktop-first : choix et impacts.
• Breakpoints : adaptations spécifiques, gestion des débordements.
• Contrôle visuel : tests rapides multi-tailles.

Partie 5 — Contenus & formulaires

• Médias : images, vidéo, backgrounds, formats responsive.
• Formulaires : champs, validations, notifications, stockage.
• Atelier (pertinent) : bloc “héros” + formulaire de contact fonctionnel.

Partie 6 — CMS Webflow (contenus dynamiques)

• Collections : types de champs, relations, templates de page.
• Listes dynamiques : filtres, tri, pagination ; maillage interne.
• Atelier (pertinent) : collection “Articles/Projets” + template associé.

Partie 7 — Interactions & micro-animations

• Déclencheurs : survol, clic, scroll ; enchaînements & easing.
• Bonnes pratiques : sobriété, réutilisation, impact perfs.
• Atelier (pertinent) : animation d’apparition de sections + effet léger au scroll.

Partie 8 — SEO on-page

• Sémantique : H1–H6, balises, structure, liens internes.
• Métadonnées : titres, descriptions, alt images, URLs propres, sitemap/robots.
• Contrôles : check-list SEO sur 1–2 pages clés.

Partie 9 — Performances & optimisation des images

• Formats & compression : PNG/JPG/SVG/WebP/AVIF, lazy-loading.
• Mesure : Core Web Vitals, principaux leviers d’amélioration.
• Atelier (pertinent) : optimisation d’un lot d’images et vérification des gains.

Partie 10 — Analytics & conformité

• GA4 & pixels : intégration, événements simples, UTM.
• Consentement : bannière, paramétrages essentiels (bon sens RGPD).
• Contrôle : vérification de la remontée des vues/événements.

Partie 11 — Publication & tests

• Prévisualisation & staging : procédures et check final.
• Mise en ligne : Webflow hosting, domaine personnalisé, SSL, redirections.
• Qualité : tests navigateurs/devices, formulaires, 404/logs.
• Atelier (pertinent) : publication de la version de test + plan de recette.

Partie 12 — Maintenance & sécurité “de base”

• Gouvernance légère : sauvegardes/versions, rôles, workflow d’édition.
• Risques courants : scripts tiers, injections ; règles minimales de sécurité.
• Pérennisation : check-list de maintenance et calendrier de revue.