Webdesign débutants : Designer une page d'accueil sobre & attractive sur Figma
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Webdesign débutants : Designer une page d'accueil sobre & attractive sur Figma

Adrien Gazaix
12,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto Figma en vidéo, nous allons découvrir ensemble comment designer une page d'accueil professionnelle à partir d'un brief client.
Cette formation est avant tout pour les débutants, c’est-à-dire ceux qui ne connaissent pas ou peu le webdesign et qui n'ont pas encore ouvert de logiciel tel que Figma auparavant.

Vous souhaitez vous lancer dans le webdesign ? 
Que ce soit par curiosité ou pour en faire votre métier, cette formation vidéo sera un véritable tremplin !

Au programme de cette formation Webdesign débutants sur Figma :

  • Découvrir l'interface de Figma ainsi que les outils disponibles,
  • Créer une grille de 12 colonnes pour structurer le contenu de la maquette,
  • Designer un menu de navigation,
  • Créer un bouton adaptatif grâce à l'auto layout,
  • Créer un visuel d'accroche fort en mixant du texte et de l'image,
  • Insérer des icônes au format SVG,
  • Créer un dégradé réutilisable facilement,
  • Modifier une couleur instantanément sur tout le document,
  • Apprendre à bien aérer le contenu pour améliorer la lisibilité,
  • Utiliser des images avec différents types d'affichage : fill, crop...
  • Lire un brief et utiliser une charte graphique existante pour rester proche de l'univers proposé par le client,
  • Garder les proportions d'un écran 16/9 pour un bandeau vidéo,
  • Et plein de conseils & d'astuces sur le webdesign !

Pour avoir une idée de tout ce que l'on va réaliser ensemble pendant ces 1h50 de vidéo, vous pouvez visionner l'extrait vidéo sur la fiche du tuto.

INCLUS avec la formation : Tous les fichiers nécessaires à la création de la maquette : Logo, photos, icônes SVG, Police de caractères, le brief client et bien sûr la maquette Figma obtenue à la fin de la formation.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrez des difficultés, pendant ou après le visionnage de la vidéo.

Bonne formation à tous !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Introduction & Installation de Figma
Leçon 2
Découverte de l'interface de Figma
Leçon 3
Lecture du Brief client, conseils & astuces sur le webdesign
Leçon 4
Mise en place de la grille & design du header avec le logo et le menu
Leçon 5
Designer le visuel d'accroche avec un bouton call to action
Leçon 6
Designer la partie des avantages en 3 colonnes
Leçon 7
Designer le bandeau vidéo

Plan détaillé du cours

Leçon 1Introduction & Installation de Figma
05m39s
Leçon 2Découverte de l'interface de Figma
09m49s
Leçon 3Lecture du Brief client, conseils & astuces sur le webdesign
13m55s
Leçon 4Mise en place de la grille & design du header avec le logo et le menu
16m27s
Leçon 5Designer le visuel d'accroche avec un bouton call to action
13m46s
Leçon 6Designer la partie des avantages en 3 colonnes
20m40s
Leçon 7Designer le bandeau vidéo
11m56s
Leçon 8Designer le footer pour terminer la maquette
14m29s
Leçon 9Conclusion
02m08s

Aperçus

Avis des apprenants

Détail des avis
33
Apprenants
10
Commentaires
5/5
Note moyenne
5/5
10
4/5
0
3/5
0
2/5
0
1/5
0
Xavier Charvin
Xavier Charvin
Publié le 26/04/2024
tres bonne formation merci a bientot
Marc Molon
Marc Molon
Publié le 21/03/2024
Très bien pour débuter. impatient de voir la version prototypage avec les effets hover...
Pascale Achard
Pascale Achard
Publié le 28/09/2023
Bonjour Adrien, Merci beaucoup pour cette formation, je suis débutante sur Figma, et tout a été vraiment très clair. je vais continuer sur la suite de cette formation. Je serais intéressée par le prototypage :)
Adrien Gazaix
Adrien Gazaix
Super si ça vous a plu ! Et la 2ème partie de ce tuto est disponible sur tuto.com pour apprendre comment décliner les autres pages du site et créer un prototype animé.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Figma

Que contient le fichier source ?

Les médias utilisés (photos, icônes, logo), la police de caractère, le brief client, et la maquette Figma obtenu à la fin de la formation.

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données