Atomic Design

Formations courtes
Initiation
3 jours (21 heures)
Paris
Créer un guide de style : de l'élaboration du système d'interface au browser design

Objectifs

Découvrir les guides de style et les design patterns (processus de découpage et inventaire)
Choisir ses outils
Appliquer la méthode de conception Atomic Design pour réaliser un guide de style
Composer un guide de style dans Pattern Lab
Maintenir et synchroniser son guide de style

Pour qui ?

Webdesigners, intégrateurs, développeurs front-end ou back-end, product owners…


Code dokélio :

Prérequis

Il est nécessaire d'avoir des connaissances en HTML et CSS (sélecteurs, positions et Media Queries) et de justifier d'une bonne compréhension des flux de production Web (design / intégration / développement) pour suivre cette formation.



Compétences acquises:
Créer un guide de style : de l'élaboration du système d'interface au browser design

Programme

Atomic Design

Découvrir les guides de style et les design patterns (processus de découpage et inventaire)
• Comprendre l'intérêt d'utiliser un guide de style pour une équipe Web
• Identifier les composants Web design
• Appréhender le processus de découpage en patterns
• Créer un inventaire de patterns : logos (variations et résolutions), typographies, thèmes de couleurs, tendances iconographiques, systèmes de menus, éléments d'action, composants complexes…
➔ Exercice : créer une check-list de composants (méthode des 20 secondes, tendances UI, slide de découpage…)

Choisir ses outils

• Identifier des outils de mockup et de découpage en patterns : Sketch, XD et les plugins associés
• Comparer les solutions de guides de style automatisés : Static HTML, KSS Node, Pattern Lab
• Découvrir les langages de templating dynamiques : Mustache, Underscore et Twig
➔ Étude de cas : comparer les logiciels, les langages, les méthodes

Appliquer la méthode de conception Atomic Design pour réaliser un guide de style

• Expérimenter les formats de patterns Atomic : atomes, molécules, organismes, templates, pages
• Nommer et organiser ses patterns
➔ Étude de cas : analyser un guide de style remarquable

Composer un guide de style dans Pattern Lab

• Installer Pattern Lab (version Node / PHP)
• Tester et modifi er le code des différents patterns
• Construire ses motifs (patterns) dans Pattern Lab
• Créer un composant Twig
• Ajouter des styles au composant
• Présenter rapidement les templates avec des contenus réels en ajoutant des données (JSON)
• Associer des commentaires au composant (syntaxe Markdown)
• Créer des variantes du composant
• Visualiser et tester dans les différentes résolutions d'affichage
➔ Exercices : créer un guide de style / Expérimenter le ”in-browser design“

Maintenir et synchroniser son guide de style

• Pérenniser et faire évoluer son guide de style
• Synchroniser son guide de style avec son environnement de production
➔ Étude de cas : analyse d'écosystèmes existants

S'inscrire en ligne

Atomic Design
Ref
WM14719
Tarif
1600€ HT

Prochaines sessions

Le choix de la session vous sera demandé lors de votre inscription.

Paris
Prochaines sessions
05 au 07 juin 2019
05-06-2019
07-06-2019
27 au 29 nov. 2019
27-11-2019
29-11-2019