ISG WEB training - Catch up

Sujet :

Le but de cette formation est de créer une maquette interactive sur Figma pour une application mobile pour l’un des choix suivants :

• Association du campus ISG Lyon

• Entreprise / Marque

• Salle de concert

• Artiste

Qu’est-ce que Figma ?

Figma est une plateforme collaborative pour éditer des graphiques vectoriels et faire du prototypage. Elle permet de concevoir des design systems pour faciliter la création de sites web et d’applications mobiles.

C’est une solution à destination des UI et UX designers et des développeurs. L’interface propose de nombreuses fonctionnalités :

• De design

• De prototypage

• De design system

• De collaboration

Figma est aussi un support de présentation. Il permet un travail d'équipe à distance, fluide, centralisé, en toute transparence et instantané. Webdesigners, développeurs, clients ou testeurs peuvent intervenir en simultané sur le même fichier.

Prérequis :

• La maquette est interactive

• La maquette contient au moins 5 pages

• Au moins 3 composants dont un avec une ou des variantes

• L’interface utilisateur est recherchée

• L’expérience utilisateur à été réfléchie

• Des images sont intégrées

• Les textes sont stylisés

• Un scroll horizontal et un autre vertical sont disponibles

Quelques conseils :

• Créez-vous une palette de couleur, gardez-les sur un fond uni (de préférence celui de votre application) avec différentes opacités.

• Gardez vos designs de composants sur un calque différent

• Utilisez des plugins pour gagner du temps

• Structurez correctement vos différentes vues

• Designez plusieurs fois un composant pour garder celui que vous préférez

Liens utiles :

• Générer des palettes de couleurs : coolors.co

• Les bases du prototypage : https://www.figma.com/resources/learn-design/

• Bibliothèque d’image libre de droit : https://unsplash.com/

• Bibliothèque d’icônes libre de droit : https://heroicons.com/

• Retirer le fond d’une image : https://www.remove.bg/

• Des idées de design: https://dribbble.com/

Tutoriel vidéo pour apprendre les bases de Figma :

Pour votre rendu :

Exporter votre prototype en .fig et l’envoyer par email à theo.marinho@aktislab.fr