Aux Designers, qui travaillent avec WordPress et qui souhaitent exploiter Gutenberg
Aux équipes Design et Tech des agences web, qui vendent déjà des sites avec Gutenberg et le Full Site Editing
Aux développeurs, qui veulent aider leurs Designers à mettre le pied à l’étrier avec Gutenberg
Programme
4 heures de vidéos, et des ressources précieuses pour se lancer :
7 vidéos
1 Starter Kit Figma
1 Starter Thème FSE
Communauté Discord
Introduction
Pourquoi l’Éditeur de Blocks change la manière de concevoir des sites web ?
Pourquoi Gutenberg est-il un outil de conception incontournable ?
Pourquoi la rationalisation des Designs est importante ?
Quelle place pour le sur-mesure avec Gutenberg ?
Typographie (45 min)
Être stratégique dans la gestion de la typographie de son projet web
Penser un système de gestion typo utilisable sur la plupart de ses projets
Style ≠ Markup
Couleurs (30 min)
Créer des palettes de couleur rapidement pour ses projets
Définir un cadre à l’usage des couleurs, notamment dans l’éditeur de blocks
Industrialiser une partie de l’accessibilité visuelle d’un projet
Grille et espacements (45 min)
Comprendre et exploiter la grille de l’éditeur de Blocks dans ses Designs
Créer un système d’espacement pour la création de tous ses sites
Exploiter les blocks natifs pour gérer des espacements custom
Automatiser des espacements en fonction des styles de blocks
Options natives à exploiter (45 min)
Comprendre comment les options natives des Blocks fonctionnent
Faire le point sur les options de Blocks utiles pour designer un site
Faire le point sur les options de blocks qu’on peut exploiter et détourner sur tous nos projets web
Register Styles et autres styles spécifiques (45 min)
Comprendre ce qu’est un Register Style, et à quoi il sert
Composer une bibliothèque de styles pour un même composant avec Gutenberg
Comprendre comment déclencher des styles différents d’un même block
Conclusion : la clé pour des Designs sur-mesure ET rationalisés avec Gutenberg (30 min)
Penser en blocks, sans limites
Rationaliser ses créations web
Décupler l’effet de la création sur-mesure
Préparer le travail pour la phase d’intégration
La signature Bter : chaque chapitre de la Masterclass est traité selon 3 verticales
UI Design
Pour chaque sujet, nous explorons les différentes manières de s’y prendre dans Figma. Pour correspondre aux différents niveaux de pratique qu’on peut croiser sur un projet.
Traduction en code
La Masterclass n’est pas technique, et pourtant nous prendrons soin d’aborder la traduction des principes de Design en code (dans le theme.json ou en CSS).
Expérience éditeur
Un Design qui a du sens est un Design réalisable. Nous confronterons donc la création UI Design d’un site avec sa construction en blocks dans l’éditeur.
Designer et fondateur de l’agence WordPress Fantassin (que j’ai dirigé durant 11 ans), je travaille avec Gutenberg depuis sa version bêta en 2018, que ce soit pour mes clients ou pour les clients des agences qui m’appèlent en renfort sur le sujet du Design avec Gutenberg.
En 6 ans de travail avec l’éditeur, j’ai pu intervenir sur des sujets plus ou moins complexes, de l’usine à sites (multisite multilingue) au site éditorial complexe (boosté par du SEO de poney), en passant par le site e-commerce propulsé par Gutenberg. Sur chacun de ces projets, j’ai appliqué les mêmes principes de conception et de Design avec l’éditeur de blocks, que j’aurai à cœur de te transmettre durant cette Masterclass.
Une Masterclass recommandée par les poids lourds de l’écosystème WordPress français
Quand on parle de design et d’UI sur WordPress en France, le nom de Joffrey est forcément cité. C’est un designer talentueux qui sait mettre sa créativité et son talent au diapason avec la technique de l’outil qu’il utilise et connait par cœur, Gutenberg. En tant que Head of design de Be API, agence leader des projets WordPress en France, c’est un plaisir d’échanger avec lui quand nous nous rencontrons aux WordCamps ou autres events. Joffrey est une personne passionnée qui compte dans la communauté WP française.
Antoine Paufichet Head of Design @Be API & Be-Beau
Joffrey est un créatif de talent, pédagogue avec les clients et maîtrisant parfaitement l’écosystème WordPress et notamment l’éditeur de blocs – Gutenberg. J’ai bossé avec lui sur plusieurs projets dont l’usine à sites du groupe Systra et il a fait un excellent travail tant en terme de design system et charte graphique web que d’accompagnement du client sur les enjeux graphiques et éditoriaux. Au top.
Jean-Baptiste Audras CTO @Whodunit
Prix et modalités de la Masterclass « Design avec Gutenberg »
