Créer son site web avec Webflow

• Titre professionnel concepteur designer UI - Code CertifInfo 111423
  • Niveau de qualification : 6 - Savoirs approfondis

Objectifs

Découvrir les bases du web design.
Prendre en main les interfaces de Webflow et Figma.
Concevoir des prototypes et sites web interactifs et responsive.
Intégrer et gérer du contenu dynamique avec un CMS.
Optimiser le référencement naturel (SEO).
Structurer vos projets avec des méthodologies efficaces comme Client First.
Publier un site professionnel en ligne.

Programme de la formation

Introduction et bases du HTML
Comprendre le rôle et l'importance du HTML dans le développement web.
Créer et organiser la structure de base d'une page web avec , et .
Utiliser les balises essentielles comme

, , , et .
Ajouter des attributs pour enrichir et personnaliser les balises.
Créer des formulaires interactifs et fonctionnels.
Intégrer des contenus multimédias tels que des images, vidéos et audios.
Appliquer les bonnes pratiques de structuration et valider le code avec le W3C Validator.
Introduction et bases du CSS
Comprendre la structure et l'utilisation de CSS pour styliser des pages HTML.
Ajouter des styles simples pour la typographie, les couleurs et les marges.
Utiliser des sélecteurs, classes, et ID pour cibler les éléments HTML.
Créer des mises en page avancées avec Flexbox et Grid.
Ajouter des animations et des transitions pour dynamiser les interfaces.
Optimiser le rendu visuel sur tous les appareils avec un design responsive.
Appliquer les bonnes pratiques CSS pour un code propre et maintenable.
Introduction à Figma
Concevoir des prototypes avec Figma.
Utiliser les outils de création et de design.
Exporter et partager un prototype avec une équipe.
Les bases de Figma
Analyser les panneaux principaux : calques, pages et design.
Naviguer dans l'espace de travail : frames, calques et groupes.
Utiliser les outils de création : formes, texte, masques et images.
Organiser les éléments : grilles, repères, calques et contraintes.
Introduction aux plugins pour optimiser votre workflow.
Créer mon prototype sur Figma
Utiliser les raccourcis clavier pour un travail rapide.
Explorer les Design Systems : styles, variables et composants.
Les outils avancés : auto-layout, responsive, formes complexes.
Connexion des pages, animation basique et partage des prototypes.
Collaborer en équipe : commentaires, mode développeur et export.
Découvrir le design UI/UX
Comprendre l'UX : expérience utilisateur et habitudes.
Appliquer l'UI : tendances, équilibre visuel et inspirations.
Analyser des sites et landing pages pour trouver les bonnes pratiques.
Adopter le mobile first et intégrer les principes d'accessibilité.
Découvrir Webflow et le No Code
Qu'est-ce que le No Code et pourquoi l'utiliser.
Les fonctionnalités principales de Webflow.
Créer un compte et comprendre les différentes offres.
Explorer l'interface de Webflow étape par étape.
Structurer et organiser votre projet
Importer et organiser vos ressources (images, polices, vidéos).
Créer une page de Style guide pour standardiser vos designs.
Ajouter et structurer des éléments sur vos pages.
Créer un site responsive
Construire un header et un footer cohérents.
Développer votre site section par section.
Rendre votre site responsive pour mobile, tablette et desktop.
Dynamiser votre site avec un CMS
Créer un CMS pour gérer du contenu dynamique.
Ajouter facilement des articles, projets ou produits sur votre site.
Optimiser, publier et aller plus loin
O