Détail de la formation
.svg){kind=icon}
Pré requis
Niveau 1
Les secrets d'un design qui convertit
16 leçons
.svg)
Introduction à un bon design
Designer pour convertir
La hiérarchie visuelle
La lisibilité et la clarté d’une landing page
La psychologie des couleurs
Tous les outils pour trouver des couleurs qui match à coup sûr : Contrast checker, palette de couleurs
Choisir ses polices + les meilleures polices pour ses pages
La tension visuelle
Les contrastes
Les call to action
Les espaces blancs (white spaces)
Les espaces négatifs (negatives spaces)
L’overlapping
Les ressources visuelles (photos, illustrations, mockups et icônes)
Stimuler sa créativité
Les différentes sections qui composent une landing page
Designer sa première landing page (Figma)
4 leçons
Visite guidée de Figma
Live design : Faire la maquette de Papernest
Live design : Faire la maquette d'Alan
Challenge : Reproduire une maquette Figma et nous la soumettre pour validation
Webflow niveau 1 (débutant)
65 leçons
Visite guidée accélérée de Webflow
Comprendre le code pour maîtriser le no code (HTML/CSS)
Les éléments visuels (HTML)
Layout
Les divs
Les listes
Les boutons et “link blocks”
Heading, text, link text, etc…
Les médias
Les formulaires
Les composants
Les layouts pré-construis
L’éditeur de style (CSS)
Les classes et les ID
Mise en page : Display, block, Flexbox, grid
Espace : Margin et padding
Les boutons et “link blocks”
Les dimensions : Width and Height
Les dimensions : Min-width/Min-height et Max-width/Max-height
Les dimensions : L’overflow
Position : Static, relative, absolute et fixed
Typographie
Fonds et couleurs
Les bordures
Les effets : L’opacité
Les effets : Outline
Les effets : Box shadows
Les effets : Transform
Les effets : Filters et Backdrop Filters
Les effets : Les curseurs
Les symboles
La hiérarchie visuelle dans Webflow
Le responsive : Créer des expériences uniques sur chaque device
Intégration live 1 : Reproduire la landing page de Papernest
Intégration live 2 : Reproduire la landing page d’Alan (à venir)
Défi validation niveau 1: Reproduire une maquette Figma de niveau 1 sur Webflow en solo + validation
Niveau 2
Webflow niveau 2 (Intermédiaire)
31 leçons
Introduction au animation et micro-animations
Maîtriser les micro-animations CSS
Les états dans Webflow
Micro-animation : Hover
Micro-animation : Pressed
Micro-animation : Focused
Micro-animation : Visited
Challenge : Créer ses premières animations CSS
Visite guidée de l’interface d’animation (JS)
Element trigger et page trigger, quelles différences entre les deux ?
Les triggers : Mouse click, mouse hover, etc..
Option loop : Créer une boucle
Pratique : Créer des animations pour chaque déclencheur
Element trigger → Mouse Hover : Animer une card
Element trigger → Mouse Hover : Animation avancée d’un bouton
Element trigger → Mouse click : Créer une popin
Element trigger → Mouse click : Créer une FAQ
Element trigger → Scroll into view : Faire des apparitions
Element trigger → Mouse move hover element : Effectuer un suivi de souris
Element trigger → Mouse move hover element : Créer un effet 3D sur une carte (exemple wincity)
Element trigger → While scrolling in view : Barre de progression
Page trigger → While page is scrolling : Background nav bar change
Page trigger → Page load : Apparition de la première section
Page trigger → Page scrolled : nav bar disparait au scroll vers le bas et apparait au scroll vers le haut
Les animations et le responsive, comment ça marche ?
Integration live : Reproduire les animations du cybertruck de Tesla
Préparer son projet (font, couleur, etc...)
Intégration de la page
Ajouter les micro-interactions
Ajouter des animations
Responsive : Adapter sa page sur tablette
Responsive : Adapter sa page sur mobile
Intégration live : Reproduire les animations de la landing page d’Oculus Quest 2
Préparer son projet (font, couleur, etc...)
Intégration de la page
Ajouter les micro-interactions
Ajouter des animations
Responsive : Adapter sa page sur tablette
Responsive : Adapter sa page sur mobile
Niveau 3
Webflow niveau 3 (Avancé)
15 leçons
Introduction aux pages de niveau 3
Intégration live : Reproduire la landing page de l’iphone 13
Comprendre la structure de la page
Intégrations étape par étape
Responsive : Adapter sa page sur tablette
Responsive : Adapter sa page sur mobile
Intégration live : Reproduire la landing page de Take Boost
Comprendre la structure de la page
Intégrations étape par étape
Responsive : Adapter sa page sur tablette
Responsive : Adapter sa page sur mobile
Intégration live : Reproduire la landing page de Weglot
Comprendre la structure de la page
Intégrations étape par étape
Responsive : Adapter sa page sur tablette
Responsive : Adapter sa page sur mobile
Utiliser le code personnalisé
Animation mockup 3D sur Webflow
Bonus
Bonus 1 : Notre stack d'outils
Nous vous donnons tous les outils supplémentaires qui vont vous permettre de booster vos landing pages
Bonus 2 : Tutos à la demande
Vous pouvez nous demander des mini-tutos sur des sections que vous souhaitez reproduire et que vous avez sur des pages qui vous inspire.
(Uniquement réservé au pack complet, Webflow Landing Expert)
Bonus 3 : Créer des pages eco-friendly
7 leçons
Réduire le poids de ses images
Réduire le poids de ses vidéos en choisissant le bon hébergeur
Choisir les bonnes fonts
Penser développement minimaliste
Besoin d’animations ? Voici comment les rendre le plus léger possible
Utilise des serveurs à proximité + les 2 meilleurs hébergeurs (français)
Le dark mode pour réduire son impact dans certains cas
%202.svg)
%202.svg)
-min.png)
-min.png)
.svg)
.svg){kind=icon}
%201.svg){kind=icon}
%201.svg)
%202.svg)
.svg)
.svg)
.svg)
.svg)
-min.png)
-min.png)
