Les fondamentaux pour Designer avec Gutenberg (1 h 16 min)
L’Atomic Design
Les fondamentaux WordPress à maîtriser pour Designer avec le CMS
Guides de styles et Design Systems
Exemples de sites créatifs avec Gutenberg
Développer un système typographique (1 h 38 min)
Introduction : rationaliser, pourquoi ?
Typographie sur le web : enjeux
Les grands principes de la Secret Sauce de la gestion typographique avec Gutenberg
En pratique : construire son système typographique
Couleurs (1 h 50 min)
Introduction : rationaliser, pourquoi ?
Couleur sur le web : enjeux
Les grands principes de la Secret Sauce de la gestion des couleurs avec Gutenberg
En pratique : construire son système colorimétrique
Grille et espacements (1 h 39)
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 (1 h 10 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 (1 h 01 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 (1 h 18 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
1
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.
2
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).
3
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.
Avis client Que pensent les participant•es de la Masterclass ?
C’est magique ! Je n’ai jamais fait de web et je galérais depuis un moment avec Gutenberg sans avancer. Ta formation a été un déclic ! Penser comme un designer ! Je suis en train de construire mon premier thème et, pour le moment, tout se met en place petit à petit (typos, couleurs, blocs, …) !
Alain
Passionnant cette Masterclass, je vais la regarder plusieurs fois, ne serait-ce que pour l’aspect rationalisation qui est formidable !
Thierry Mathez (New Slang) Créateur de sites Internet
La Masterclass « Design avec Gutenberg » de Joffrey m’a largement confirmé qu’avec Gutenberg on peut « industrialiser » des sites web modernes tout en gardant une touche très personnalisée. On y apprend plein de techniques pour créer nos projets de manière intuitive. Si vous voulez vraiment sortir du lot avec des sites qui sont aussi beaux qu’efficaces, cette formation est pour vous. Je la recommande sans hésiter !
Grégory Cortès Marketeux Digital
Actuellement en cours d’apprentissage du FSE, cette Masterclass m’a permis de passer un gap dans la création de sites WordPress structurés et modernes. Joffrey est pédagogue et maîtrise parfaitement les différents enjeux liés à la conception sous Gutenberg. Très content de cette Masterclass.
Arnaud
Votre formateur
Joffrey Jochum, Designer et Gut’enthousiast
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 « Designer avec Gutenberg »
Des tarifs préférentiels sont applicables. Se reporter aux conditions mentionnées dans la Foire aux Questions. En achetant la Masterclass, vous adhérez aux conditions d’utilisation de celle-ci.
Ce qui est inclus dans la Masterclass
10h20 de formation vidéo, réparties sur 8 chapitres
L’accès au Starter Kit Figma construit durant la formation
L’accès au Starter Thème FSE construit durant la formation
L’accès immédiat à la communauté Discord (50+ Gutenberg Enthousiats)
1 heure de coaching individuel (option, en visio)
Foire aux questions
De quels logiciels ou outils ai-je besoin pour profiter de la Masterclass ?
Pour profiter au mieux de la Masterclass, je conseille d’installer une version de WordPress en local sur votre ordinateur (avec Local by Flywheel – gratuit – pour MacOS par exemple), et de prendre une licence Figma (la license gratuite est suffisante).
Est-ce que la Masterclass est à jour vis-à-vis des évolutions de Gutenberg et du Full Site Editing ?
Oui. Tous les principes de Design et d’Intégration abordés durant la Masterclass sont traités de telle manière à être agnostique, et à pouvoir s’appliquer quelque soit la version de Gutenberg.
La vision Design qui dirige la Masterclass est intemporelle.
Quelle différence(s) entre cette Masterclass et la formation « Full Site Editing » de Capitaine WP ?
La formation « Full Site Editing » de Maxime (Capitaine WP) est plutôt orientée sur la technique, là où la Masterclass de Bter est d’avantage orientée sur la conception et le Design.
L’idée derrière la Masterclass est de comprendre comment créer un système de conception commun entre le Design et la Tech, qui soit également au service de l’expérience de Contribution. Chaque métier peut ensuite appliquer ses propres méthodes, au service de cette conception commune.
En réalité, les deux formations sont très complémentaires.
Y a-t-il une politique de remboursement de la Masterclass ?
En achetant la Masterclass, vous renoncez au délai de rétractation légal pour accéder immédiatement au contenu.
En contrepartie, toute commande est annulable et remboursable en intégralité sur demande écrite à info@bter.design dans les 10 jours calendaires qui suivent l’achat.
Combien de temps ai-je accès au contenu de la Masterclass ?
Tu peux consulter les vidéos pendant 2 ans sur la plateforme, y compris les mises à jour.
Jeune entrepreneur, Freelance, Étudiant ou Demandeur d’Emploi : y a-t-il des tarifs préférentiels ?
Les conditions pour bénéficier d’un tarif préférentiel (-40%) sur la Masterclass sont les suivantes :
Être étudiant•e (avec présentation d’un justificatif)
Être demandeur•euse d’emploi (avec présentation d’un justificatif)
Avoir démarré son activité de Freelance depuis moins d’un an
Avoir une activité de Freelance avec un chiffre d’affaires annuel inférieur à 30.000 € HT
Si vous êtes dans cette situation, n’hésitez pas à me contacter pour profiter du tarif préférentiel.
Est-ce que la Masterclass est prise en charge par le CPF ou un OPCO ?
Cette Masterclass n’est prise en charge, ni par le CPF ni par les OPCO.
Cependant, mes formations sur-mesure au Design avec Gutenberg sont éligibles au financement par les OPCO, pour les équipes digitales. Vous pouvez me contacter via mon LinkedIn pour en parler, ou prendre rendez-vous directement sur mon calendrier.
Le prix de la Masterclass est-il dégressif si je l’achète pour mon équipe ? (agences)
Oui, pour les achats d’équipe, la politique est la suivante :
Personne 1 : 100% du prix
Personnes 2 et 3 : 62% du prix
Personnes 4, 5 et 6 : 50% du prix
Personnes 7, 8, 9 et 10 : 38% du prix
Pour mettre en place un achat de groupe, vous pouvez envoyer une demande à info@bter.design. Une retour vous sera fait sous 24 heures.
Aurais-je une facture pour l’achat de la Masterclass ?
Oui, celle-ci sera accessible juste après ton achat, et la facture sera émise par la plateforme Gumroad.
Conditions d’utilisation de la Masterclass : Chaque accès à la Masterclass est unique et nominatif. La revente ou la reproduction des contenus de la Masterclass est interdite.
