• Tu ne sais pas quelle possibilités créatives offre Gutenberg ?
  • Tu ne sais pas par quoi commencer pour Designer avec l’éditeur de blocks ?
  • Tu veux t’assurer de pouvoir réaliser des sites créatifs avec Gutenberg ?

C’est normal.
Gutenberg et l’éditeur de blocks ont apporté beaucoup de changements dans la manière de concevoir les sites WordPress.

Cette Masterclass « Design avec Gutenberg » est là pour t’aider à y voir plus clair.

Au cours de cette Masterclass, tu apprendras à :

1

Développer une bonne connaissance des fonctionnalités natives de Gutenberg, exploitables dans tes futurs designs

2

Te projeter dans ce qui est faisable avec les blocks natifs de l’éditeur ; et comment on peut les booster et/ou les détourner

3

Faire cohabiter le côté « sur-mesure, créatif » et le côté « rationnalisé » dans tes designs de sites (si si, c’est possible !)

4

Délivrer des designs qui soient réalisables techniquement sans y laisser tes cheveux (ou ceux de tes collègues tech)

À qui s’adresse cette Masterclass ?

  1. Aux Designers,
    qui travaillent avec WordPress et qui souhaitent exploiter Gutenberg
  2. Aux équipes Design et Tech des agences web,
    qui vendent déjà des sites avec Gutenberg et le Full Site Editing
  3. Aux développeurs,
    qui veulent aider leurs Designers à mettre le pied à l’étrier avec Gutenberg
  • Programme

Plus de 10 heures de vidéos, et des ressources précieuses pour se lancer :

  • 8 vidéos
  • 1 Starter Kit Figma
  • 1 Starter Thème FSE
  • Communauté Discord
  • 1 heure de coaching personnalisé
Introduction (37 min)
  • Introduction sur Gutenberg
  • Pourquoi l’Éditeur de Blocks change la manière de concevoir des sites web ?
  • Pourquoi Gutenberg est-il un outil de conception incontournable ?
  • Rationalisation Design, Industrialisation Design : de quoi parle-t-on ? Pourquoi c’est important ?
  • Quelle place pour le sur-mesure avec Gutenberg ?
  • Objectifs de cette Masterclass
  • De quoi vous aurez besoin pour cette Masterclass
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

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.

Rejoignez le mouvement
« Design avec Gut » !