Comment Démarrer le Design d'un Écran Clé d'Application

Les goutières et les colonnes
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Atelier Figma - Design d'application
Revoir le teaser Je m'abonne
4,5
Transcription

159,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
159,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de :
- Comprendre l'importance d'une grille de mise en page dans le design d'interface.
- Apprendre à créer et ajuster une frame avec une layout grid.
- Découvrir comment adapter une grille en fonction des besoins spécifiques d'un projet.

Dans cette vidéo, apprenez les bases du design d'écran en utilisant une layout grid pour un alignement optimal des éléments.

Cette leçon se concentre sur la création et l'utilisation d'une grille de mise en page pour le design d'un écran clé de l'application. Nous commencerons par créer une frame, puis nous ajouterons une layout grid pour faciliter l'alignement des éléments. La grille par défaut sera remplacée par des colonnes et des gouttières pour une précision accrue. Nous ajusterons ensuite le nombre de colonnes pour correspondre au design souhaité.

En général, une grille de huit colonnes est utilisée pour les applications mobiles. Cependant, pour correspondre à notre modèle spécifique, nous utiliserons une grille de onze colonnes. Vous découvrirez également comment activer ou désactiver la grille sans modifier les paramètres, permettant ainsi de démarrer et d'ajuster librement vos éléments de design.

Voir plus
Questions réponses
Pourquoi utiliser une layout grid dans le design d'écran?
L'utilisation d'une layout grid permet d'assurer un alignement cohérent et précis des éléments sur l'interface, facilitant ainsi la création d'un design harmonieux.
Combien de colonnes de grille est-il recommandé d'utiliser pour les applications mobiles?
Il est généralement recommandé d'utiliser une grille de huit colonnes pour les applications mobiles afin de faciliter le design réactif.
Comment activer ou désactiver la grille de mise en page sans modifier les paramètres?
Vous pouvez activer ou désactiver la grille de mise en page en utilisant le petit œil situé dans les options de la grille, ce qui permet de travailler sans changer les réglages.

Programme détaillé

8 commentaires
4,5
8 votes
5
4
3
2
1
pa12
Il y a 1 year
Commentaire
Je viens de débuter la formation mais quel dommage de ne pas avoir le fichier de travail avec... Une grosse perte de temps pour les images, les icones...etc. Pouvez-vous svp ajouter ce fichier à télécharger?
jc.mosca
Il y a 1 year
Commentaire
Comme dit plus haut, mise à part les centaines de "du coup" et "en fait" plutôt agaçants, c'est comme d'habitude chez Elephorm une formation enrichissante. J'ai mis seulement 4 étoiles car il manque la démonstration des overlays, des contraintes, des listes à puces et pas mal d'autres. Ce serait bien qu'Elephorm fasse des mises à jour de ses formations.
ousmane.ndia
Il y a 1 year
Commentaire
Bien pour apprendre les bases, mais manque les nouveautés de 2022.
nicolas.dessis
Il y a 1 year
Commentaire
Merci !
pioupiou06
Il y a 2 years
Commentaire
Super formation ! très bien expliquée !
pulpozien
Il y a 2 years
Commentaire
Très bonne formation.
Trop de "du coup" et du coup ça agace mais sinon super
maellechancerelle
Il y a 3 years
Commentaire
Super formation!!
stephanehugon
Il y a 3 years
Commentaire
Cette formation est vraiment au top ! Je ne connaissais rien de Figma (étant "seulement" développeur à la base) et j'ai appris beaucoup de choses, je recommande donc cette formation; le formateur est très sympathique et professionnel dans sa pédagogie, c'est très agréable à suivre. Je recommande par contre d'avoir au moins deux écrans (voir trois) pour suivre la vidéo et pratiquer/prendre des notes en même temps.

Seul bémol par contre, pitié Elephorm, mettez les fichiers de travail avec la formation... (Ce n'est pas la seule sur laquelle il manque les fichiers d'ailleurs); mais mettez-les, ça évite d'aller chercher à droite et à gauche des SVG que l'on doit convertir, des images, etc...

A part ça, super formation !