FOF Spécial Webinaire.pdf
•
0 j'aime•30 vues
FOF Spécial Webinaire, un webinaire de 4 heures, 4 intervenants et 4 thèmes tous orientés sur le design et la collaboration. --------------------------- Table de matière Keynote d'ouverture [Steven Houessou-Adin & Sessou Boris] ----Slide 1* Comprendre les patterns UI [Romain Dao] ---- Slide 29* Design et éthique [Micrette Tohoungnan] ---- Slide 62* Figma Tokens pour un handoff effectif [Obachola Adegnika] ---- Slide 77* Motion & animation dans un Design system [Jannis Smesny] ---- Slide 85 ------------------ Retrouvez-nous sur https://friends.figma.com/cotonou/
Recommandé
Recommandé
Contenu connexe
Similaire à FOF Spécial Webinaire.pdf
Similaire à FOF Spécial Webinaire.pdf (20)
FOF Spécial Webinaire.pdf
- 5. Region Name
- 8. Friends of Figma, Cotonou
- 11. Bevy Twitter Telegram LinkedIn 110 229 75 373
- 12. Annonces
- 13. •Social media 🖼 •Battle Figma 🥊 •Workshop 📝
- 14. Config ??
- 16. •Dark Theme •Spotlight •Individual Strokes •Auto Layout •Component properties •Variable fonts •Outline mode •Spring animation •Localization & RTL •API
- 17. Dark
- 18. Dark
- 19. Spotlight
- 21. Test Test Test Test
- 22. Auto Layout TITLE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit ullamcorper urna sagittis duis faucibus. Libero, nunc velit dignissim sed venenatis luctus ut faucibus. Vitae viverra consequat a sem ipsum pharetra arcu sit enim. Egestas aliquam senectus nibh sem faucibus at. Submit
- 23. Component properties Text Text Username Please enter your username Username BonjourBonjourBonjour Bonjouur Username Please enter your username
- 26. Spring animation
- 28. API Ex •Pro Layout •Automator •Figma Tokens Support du dark theme pour les plugins
- 30. About me • 33 years old • 1st job a Criteo • • 8 years as a freelance • • 2 years spent in Argentina • • Musician • • Front-end developer • • Started design with • macromedia Flash MX • • The Cacatoès Theory founder
- 31. Nom masculin Pattern Modèle spécifique représentant d'une façon schématique la structure d'un comportement individuel ou collectif. source: larousse.fr
- 32. Qu’est ce qu’une pattern UI Une succession d’étapes linéaires ou non, qui permettent à l’utilisateur de compléter une action définie (schema)
- 33. Toute interface (SaaS) est une succession de patterns Celles-ci peuvent avoir plusieurs issues “un comportement de l’interface connu et attendu par le user”
- 34. Le login Objectif Accéder à l’application et à ses données (compte) de manière sécurisée Méhodes 3 façons différentes de se login •Email/Password •Mobile + Verification code •SSO - Single Sign On (Apple & Google) 3 user flow différents avec la même finalité 1 2 3 4
- 35. Connais-tu d’autres façons de se login sur une platerforme SaaS ?
- 36. Les 5 règles de la bonne pattern UI ➡ Une pattern n’existe que dans un contexte ➡ Laisser le choix à l’utilisateur (si possible) & le guider ➡ Rester cohérent et ne pas réinventer la roue ➡ Anticiper les éventuelles erreurs (sytème et user) ➡ Indiquer le début et la fin de la pattern
- 37. RÈGLE 1 Une pattern n’existe que dans un contexte exemple: le bulk (multiselect)
- 38. O item selected - All email read
- 39. 1 (or more) item selected - All email read Mark as unread
- 40. All items selected - 1 or more unread email Mark as Read
- 41. Sur Figma Si 2+ calques sélectionnés -> Bulk rename
- 42. RÈGLE 2 Laisser le choix au user (et le guider) exemple: Onboarding & Save as draft
- 43. ONBOARDING ➡ Onfocus sur le premier input ➡ Error & colored inputs ➡ Navigation bullet ➡ Create account = sortie ➡ Browse assets = sortie
- 45. SAVE AS DRAFT intérompre un flow et le sauver pour le reprendre plus tard
- 46. UNE PATTERN UI EST DRIVÉE PAR LA TECH !
- 47. ON NE DOIT JAMAIS CONSTRUIRE UNE FEATURE SUR LA BASE D’UN EXCEPTION
- 48. RÈGLE 3 Rester cohérent et ne pas réinventer la roue exemple: Navigation, messagerie ...
- 51. Tout User flow est une succession de patterns qui peuvent elles mêmes être scindées en plus petites patterns
- 52. RÈGLE 4 Anticiper et indiquer les éventuelles erreurs (sytème et user) exemple: Import csv, supression
- 53. Import de .csv Import de data dans une base de donnés 1 - Préparer la donnée et la formater 2 - Importer le fichier dans l’interface 3 - Matcher la data 4 - Valider et importer 5 - Success ou Error 6 - Si Error où ?
- 54. Columns matching
- 56. Match columns Avec preview des datas
- 57. Columns validation • Indiquer les columns validées • Refresh la data
- 58. RÈGLE 5 Indiquer le début et la fin de la pattern exemple: Stepper, Empty states
- 59. Aider le user à se projetter dans la flow
- 60. Empty States
- 61. MERCI !
- 63. C’est quoi?
- 64. Ethique c’est quoi pour vous ?
- 65. Designer de manière éthique revient à réfléchir à l’impact qu’un design aura sur l’utilisateur et le concevoir au mieux pour qu’il soit positif.
- 66. Les principes du design éthique
- 67. La pyramide éthique des besoins créée par Aral Balkan et Laura Kalbag illustre bien les principes fondamentaux du design éthique, et comment chaque couche de la pyramide repose et dépend de la couche précédente.
- 68. La Frugalité, L’ inclusivité et Le respect des individus Les principaux piliers
- 69. Le design éthique est un travail constant d’amélioration et de réflexion pour construire un numérique plus respectueux.
- 70. (Le manque d'inspiration, vous n'êtes pas seuls)
- 71. Faire du sport Se connecter à la nature Brassage interculturel
- 76. MERCI !
- 78. Toute la vérité, rien que la vérité COMMUNICATION ENTRE DESIGNERS ET FRONT-END DEVS
- 79. Avoir une source qui sert de référence aux designers et dev front-end est important. Pourquoi? Ecriture Ecriture Lecture Lecture Single Source of Truth </>
- 80. Pour qui ceci est important? Designer Front-end dev Product Manager Product Owner
- 81. Couleur Typographie Spacing Border-radius Border width Opacity Sizing Box Shadow La boite magique pour les éléments UI Couleur Typographie Heading 1 Heading 2 Heading 3 Heading 4
- 82. Une partie plus pratique </> 1.Pull du repo dans Vs-code 2.Configuration de l’espace de travail 3.Création des variables réutilisable 4.Push vers Github 5.Mise à jour dans figma 1.Mise en place du Design System 2.Importation des style dans figma token 3.Configuration de Github et création de token 4.Push vers Github
- 83. Merci
- 86. I.Présentation
- 87. Jannis Smesny Freelance Product designer Remote, FR Motion experiments
- 88. Figmatelier
- 92. C’est quoi un design system?
- 93. Une bibliothèque de composants ou un UI kit?
- 94. Une bibliothèque de composants ou un UI kit?
- 95. Une documentation collaborative et évolutive qui définit l’ensemble des règles d’un projet digital
- 96. News! Les design tokens (Couleurs, fonts, dégradés, les espaces, les ombres, les radius, les bordures, l’opacité...) Les icones. Les images. Les illustrations. Les layouts. Les grilles de structure. L’image de marque physique et digitale. Le branding. Le ton de la marque. Les règles d’accessibilité. Des explications sur les choix des composants. Des exemples de code. Les règles d'utilisation. L’UI motion. L’animation. ...
- 97. Design tokens Atomes Molécules Organismes Templates Pages
- 98. Design tokens Atomes Molécules Organismes Templates Pages Couleurs Dégradé Radius Bordures Opacité Ombres Formes Typographie Logotypes ... Icones Images Illustrations Textures Boutons Outils ... Composants Cards Sidebar Menu Modals Tooltips ... Transitions Loading pages Parallax scroll ...
- 99. III.Les types d’UI motion
- 100. 3 types d’UI moEon
- 101. UI Motion fonctionnel Permet d’améliorer l’utilisation d’un site ou d’une application et améliorer l’expérience utilisateur. Micro-interactions et émerveillement Exemple: Click et hover states des boutons, Outils, Chargements.
- 102. UI Motion structurel Composants qui rentrent ou sortent de l’écran Composants qui grossisent pour montrer les détails d’un produit. Exemples:Modals, Dropdowns, Tooltips, Cards, Parallax effect ...
- 103. UI MoSon émoSonel AnimaSon d’illustraSons ou de textes Les statuts de validaSon ou d’erreur Moments d’émerveillement
- 104. 5 règles et questions fondamentales pour l’UI Motion
- 105. Ui motion site vitrine VS Ui motion applicatif
- 106. 1 Faire simple Est-ce que cela distrait mon utilisateur d'accomplir une tâche? Mon Ui motion est-il trop complexe? 2 Faire court Est-ce que cela perturbe ou ennui mon utilisateur quand il se connecte souvent à mon site ou application? Est-ce que c'est trop long? 3 Donner du sens Est-ce que cela sert mon message ou ajoute de la valeur à mon interface? Est-ce que mon Ui moBon et mon animaBon aident dans mon parcours uBlisateur ou est-ce juste un effet wow dribbble? 4 Donner le contrôle à l'utilisateur Est-ce que mon utilisateur peut mettre l'animation en pause? Est-ce que mon utilisateur peut switch entre ON/OFF? 5 Tester Il faut tester sur différents devices, navigateurs, dans différentes situations (Réseau 3G/4G, Fibre...), avec différents types d'utilisateurs, voir l'accessibilité.
- 107. IV.OuEls pour partager son UI moEon à sa team
- 108. Sketchs et storyboards pour reitérer rapidement en début de projet
- 109. 1 Le déclencheur Qu’est ce qui démarre l’acBon, l’interacBon? Décrire en quelques mots Hover, Click, AcBve, Double tap, Pinch, Slide, Swipe, Scroll, Pull, Drag, Loading page, TransiBons, Parallax effect... 2 L’action Que se passe t’il? Les éléments de l’interface peuvent apparaître, disparaître, grossir, rétrécir, changer de position ou de forme... Dessiner sur plusieurs frames. 3 Le comportement Est-ce que l’animation est rapide, lente, rebondie, tremble...? Quelles émotions veut on faire ressentir à notre utilisateur? Est ce que ce type d’animation représente bien notre identité? Décrire l’animation en quelques mots Animation rassurante, amicale, minimaliste, exagérée, énergique...
- 111. Vidéos et prototypes pour expliquer en détail les UI moEon complexes
- 112. Home Courses Music & Podcast Calendar Courses Profile Lifestyle Instructors Downloads Settings ? FAQs Log out
- 115. V.Documenter son UI motion dans le design system
- 116. 1 Le but Expliquer quand et pourquoi je dois animer. Décrire les émotions que je veux faire ressentir à mon utilisateur. Do and Don’t pour illustrer les différents cas possibles. 2 Les types d’animation Des UI motion courtes pour des animations simples comme le changement d’opacité ou de couleurs, textes... Des UI motion lentes pour des animations plus complexes comme des transitions de pages. les loading pages, les drags and drops, l’arrivée d’un contenu... Animation des textures, lumières, illustrations, vfx...pour les autres types d’animation. Temps de réponse après l’action 3 Easing Définir la physique, la durée, la vitesse de l’animaBon (Linear, Ease in, Ease out, ElasBc, Ease both, custom...)
- 118. TYPE DURÉE Boutons / Petits composants 100 - 200ms Alertes / RéorganisaSon de cards 250 - 300ms Panneaux / Modals 300 - 400ms Transitions de pages 500 - 700ms
- 120. VI.Les avantages
- 122. Pour la team: Collaboration simplifiée Meilleure communication Gain de temps
- 123. Pour le projet: Unifica;on,Hiérarchisa;on, Méthodologie de l’UI mo;on Renforce l’iden;té de notre marque Met en valeur le design Se différencier des concurrents
- 124. Pour l’utilisateur: Suscite émotion et émerveillement Expérience utilisateur unique, mémorable et immersive Attire l’attention Facilite la navigation
- 125. VII. Des questions
- 126. TWITTER: @FIGMATELIER YOUTUBE: FIGMATELIER FIGMA: @FIGMATELIER REDDIT: @FIGMATELIER
- 127. Merci