Formation Fabriquer son style graphique pour le web
Objectifs
Cette formation permet aux participants de savoir comment s'y prendre pour créer et organiser son style graphique CSS. Elle permet aussi d'avoir des notions de Design System. Des connaissances de base en CSS et HTML sont suffisantes pour accéder à la formation.
- Savoir comment fabriquer un style à la fois documenté et bien rangé
- Comprendre le vocabulaire propre au Design System
- Savoir quand fabriquer son propre style ou non
- Positionner son approche en fonction de l'identité graphique souhaitée
- Faciliter la communication entre développeur et designer
Acquis à l'issue de la formation
Le participant à cette formation sera capable de créer un style graphique ainsi que challenger ses interlocuteurs pour faire vivre l'identité graphique d'un produit ou d'une entreprise.
-
CSS
- Structurer des composants graphiques avec BEM/CAP
- Extraire des styles depuis Zeplin, Invision
-
Atomic Design
- Créer des Atomes, Molécules, Organismes
- Fabriquer et utiliser une Pattern Library
- Comprendre les différences entre Pattern Library et Component Library
-
Design Systems
- Identifier les Tokens à représenter
- Savoir quand fabriquer son propre style ou utiliser un style existant
- Être capable de définir son propre Design System
Public concerné et pré-requis
La formation concerne principalement des développeurs, des intégrateurs ou des designers pour qui le CSS et HTML ne leur sont pas totalement inconnu.
L'outil tikui ainsi que node (dernière version stable ou lts) sont nécessaire pour la formation.
Les participants devront être équipés d’un PC (non fourni) et avoir installé Git dans sa dernière version.
La formation contient une part importante de pratique. Les sessions sont réalisées avec un maximum de 10 personnes, pour nous permettre d’adapter le déroulement de la formation et de contextualiser les exercices, en fonction des participants et de leurs spécificités, tout en garantissant l'acquisition des compétences visées par la formation.
Evaluation
En début de formation, une autoévaluation est effectuée pour évaluer le niveau, ainsi que les attentes de chaque participant. Ainsi nous pouvons organiser au mieux les différents groupes de travail.
Par la suite, le formateur effectue une évaluation continue à l'aide des nombreux exercices pratiques.
En fin de formation, la progression et les acquis sont autoévalués par chacun des participants. Le formateur fournit à chacun des participants une évaluation, ainsi que les axes d'amélioration.
En option, un accompagnement postformation peut être effectué. Cela fera l'objet d'un devis complémentaire.
Programme
- 1ère demi-journée
- Bases de CSS (sélecteurs, propriétés, display …)
- Découverte de BEM/CAP
- Fabrication de composants graphiques simples (bouton, champ …)
- 2ème demi-journée
- Atomic design (Atome, Molécule, Organisme, Template, Page)
- Pattern Library
- Mise en œuvre des notions précédentes
- 3ème demi-journée
- Shared language
- Tokens
- Guide de styles (Zeplin, Invision …)
- Outils autour d'un Design System (Style Guide, Pattern Library, Component Library …)
- Implémentation d'un guide de style
- 4ème demi-journée
- Functional Patterns
- Perceptual Patterns
- Design Systems parameters (rules, parts, organization)
- Déployer et consommer une pattern library
Formateur / Formatrice
Anthony est un développeur depuis 2014, après une formation en Master informatique, il a travaillé dans plusieurs sociétés avant d'arriver chez Ippon Technologies en 2018.
Il se passionne pour le développement Front-End et plus particulièrement sur les façons d'organiser un Design System pour collaborer efficacement entre PO (ou autre responsable du produit), UX, UI, et développeur. Il crée ainsi Tikui (https://github.com/tikui/tikui) pour aider tout développeur à fabriquer sa propre Pattern Library (style graphique organisé sous forme de documentation).
Inspiré initialement par XP (extreme programming), il n'a pas de préférence envers un langage de programmation en particulier, la méthode de travail l'importe beaucoup plus.
L'apprentissage est, selon lui, nécessaire tout au long du parcours d'un développeur. C'est pourquoi il partage ses connaissances avec des lives (https://www.youtube.com/watch?v=JoPDq27d7QY), des articles (https://blog.ippon.fr/author/anthony/), mais aussi en accompagnant des équipes sur de bonnes pratiques de développement.