Formation : Le WebDesign sur Figma pour les débutants
-35% de réduction
Dans ce tuto Figma en vidéo, nous allons découvrir ensemble comment décliner les pages d'un site web à partir de l'univers créé précédemment sur une page d'accueil.
En effet, ce tuto fait suite au premier épisode dédié à la création d'une page d'accueil sobre & attractive à partir d'un brief client. Celui-ci est recommandé mais non obligatoire car la maquette est fournie dans les sources.
Cette formation est avant tout pour les débutants, c’est-à-dire ceux qui ne connaissent pas ou peu le webdesign et qui souhaitent apprendre à décliner toutes les pages d'un site tout en restant cohérent avec la charte graphique existante.
Nous créerons aussi petit à petit un prototype animé qui permettra au client de se projeter dans son futur site internet car il pourra naviguer comme si celui-ci était déjà en ligne.
Au programme de cette formation Webdesign débutants Episode 2 sur Figma :
- Créer des composants réutilisables pour le header & le footer
- Créer des liens entre les différentes pages depuis ces composants
- Rendre le menu principal fixe lors du scroll dans la page
- Designer des mises en pages dynamiques pour améliorer le confort de lecture
- Designer un formulaire de contact
- Utiliser un plugin pour générer une carte
- Créer une icône sur la carte pour montrer l'emplacement de l'entreprise
- Utiliser plusieurs images d'un seul coup grâce au "Place image"
- Designer une page de connexion pour l'espace client avec un background en pleine page qui peut servir aussi pour une Landing Page par exemple
- Mettre en place un scroll au clic sur un bouton dans une page
- Hiérarchiser le contenu et imaginer le parcours de l'utilisateur dans le site en créant des call to action en bas de chaque page
- Et plein d'autres choses encore sur les outils de Figma, les techniques à utiliser pour gagner du temps, des conseils sur le webdesign...
Pour avoir une idée de tout ce que l'on va réaliser ensemble pendant ces 2h15 de vidéo, vous pouvez visionner l'extrait vidéo sur la fiche du tuto.
INCLUS avec la formation : Les médias utilisés sur les maquettes, la maquette Figma du 1er épisode 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 !
Table des matières de cette formation Figma (durée : 2h15m)
-
- Créer des composants pour le header & footer à partir de la page d'accueil 00:11:33 15 crédits
- Design de la page Histoire - Partie 1 00:14:03 15 crédits
- Design de la page Histoire - Partie 2 00:20:36 15 crédits
- Design de la page Offre - Partie 1 00:16:43 15 crédits
- Design de la page Offre - Partie 2 00:23:56 15 crédits
- Design de la page Contact 00:23:17 15 crédits
- Design de la page Mentions légales 00:10:55 15 crédits
- Design de la Connexion à l'espace client 00:14:47 15 crédits
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
Bonjour Adrien, Merci beaucoup, cette formation est vraiment géniale. J'ai complètement hâte de poursuivre sur la version mobile, de même que sur l'intégration (ce serait absolument le Top du Top). Je te souhaite une bonne préparation de tes formations ! À très bientôt. Éric.
-
Bonjour, merci pour les 2 épisodes super bien présentés. Effectivement je suis preneuse pour l'épisode 3 afin de voir comment rapidement faire du responsive design sur mobile.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Les médias utilisés sur les maquettes, la maquette Figma du 1er épisode et bien sûr la maquette Figma obtenue à la fin de la formation.
note moyenne
avis laissés