Animation d’une formation penpot ↔ gutenberg en distanciel
Paris (75) Budget : moins de 500 € Publié le 30/03/26
Description de la mission
Bonjour,
Nous sommes un organisme de formation.
Nous aurions la mission de formation suivante à vous proposer :
Formation : Web Design & Architecture Native (Penpot ↔ Gutenberg)
Objectif : Maîtriser Penpot pour concevoir des interfaces créatives, optimisées SEO, et structurées pour une intégration native automatisée dans WordPress.
Module 1 : Maîtrise de l'outil Penpot (Les Fondations)
Avant de penser "code", il faut maîtriser la puissance collaborative et technique de Penpot.
• Interface et Workflow : Gestion des boards, des calques et des pages.
• Outils de Dessin Vectoriel : Créer des formes complexes et des courbes de Bézier propres (essentiel pour des fichiers SVG légers).
• Composants & Variantes : Créer des éléments réutilisables (boutons, cartes, inputs) pour gagner en productivité.
• Prototypage Interactif : Simuler les animations et les flux utilisateurs pour validation avant intégration.
Module 2 : Méthodologie BEM & Hiérarchie SEO Visuelle
C'est ici que le design rencontre la structure du code et les exigences de Google.
• Nommage BEM (Block Element Modifier) : * Apprendre à nommer ses calques dans Penpot selon la logique .bloc__element--modifier.
o Bénéfice : Le développeur identifie instantanément la structure HTML et les classes CSS à utiliser.
• Architecture Sémantique ($H1$ à $H6$) : * Définition rigoureuse de la hiérarchie des titres.
o Vérification visuelle de la "pyramide" d'information pour le SEO.
• Accessibilité (A11y) : Utilisation des outils de contraste de Penpot pour garantir que chaque niveau de titre est lisible par tous (et par les robots de Google).
Module 3 : Le Design par Conteneurs (Flexbox & CSS Grid)
Concevoir pour le web "vivant" de WordPress 6.6+.
• Logique Flex Layout : Utiliser exclusivement les options de mise en page automatique de Penpot pour simuler les blocs Groupe, Rangée et Empilement de Gutenberg.
• Alignement Technique : Penser en gap, padding et alignment plutôt qu'en placement libre à la souris.
• La Grille Native : Designer avec les contraintes de la nouvelle "Grid" native de WordPress pour assurer un responsive parfait sans CSS additionnel.
Module 4 : Le "Theme.json" comme Guide Créatif
Comprendre comment les choix graphiques automatisent la configuration de WordPress.
• Design Tokens & Couleurs Sémantiques : Créer une palette (primary, accent, etc.) qui sera injectée dans les styles globaux.
• Typographies Fluides (Calcul via Clamp) : Designer des textes qui s'adaptent dynamiquement (ex: clamp(2rem, 5vw, 4rem)) pour supprimer les réglages manuels par device.
• Système d'espacements (Spacings) : Définir une échelle (ex: 0.5rem à 4rem) pour une harmonie visuelle totale et un code ultra-léger.
Module 5 : Graphisme & SEO Technique (Performance)
Garantir des scores PageSpeed de 95+ grâce au design.
• Optimisation LCP (Largest Contentful Paint) : Concevoir des sections "Hero" créatives mais légères (SVG, dégradés CSS natifs au lieu d'images lourdes).
• Iconographie Vectorielle : Export propre des assets SVG depuis Penpot pour une insertion directe en code (zéro requête HTTP inutile).
• Stabilité Visuelle (CLS) : Designer des conteneurs avec des ratios fixes pour éviter les sauts de mise en page au chargement.
Attendus pour le client :
Pour la graphiste : Elle reste très créative mais ses créations sont désormais structurées et techniquement irréprochables.
1. Pour le développeur : Le travail est simplifié et automatisé. Il n'y a plus d'interprétation, seulement de la mise en œuvre de données (BEM, JSON, Flexbox).
2. Pour le client (Google) : Un site ultra-rapide, accessible, sémantiquement parfait, et sans le surpoids d'extensions tierces (Stackable ou autres).
Il faut retenir : Une maîtrise plus poussée de PENPOT 2.14 / Une création toujours originale mais qui est pensé pour simplifier le travail du dev / Un design qui prend en compte les directives SEO
Durée : 09h00 (3 sessions de 03h00)
Contenu, dates : à déterminer en fonction de l’échange téléphonique avec le client
Si vous êtes intéressé(e), je vous remercie par avance de bien vouloir me communiquer vos prétentions tarifaires.
Je reste bien entendu à votre entière disposition pour tout complément d’information.
Cordialement,
Sophie
