Webdesign débutants - Episode 2 : Déclinaison des pages & Prototype animé
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Webdesign débutants - Episode 2 : Déclinaison des pages & Prototype animé

Adrien Gazaix
Promo -33% Jusqu'au 23 juillet, 23:59
10,00€15,00€
Acheter maintenant, payer plus tard. En savoir plus

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 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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Créer des composants pour le header & footer à partir de la page d'accueil
Leçon 2
Design de la page Histoire - Partie 1
Leçon 3
Design de la page Histoire - Partie 2
Leçon 4
Design de la page Offre - Partie 1
Leçon 5
Design de la page Offre - Partie 2
Leçon 6
Design de la page Contact
Leçon 7
Design de la page Mentions légales

Plan détaillé du cours

Leçon 1Créer des composants pour le header & footer à partir de la page d'accueil
11m33s
Leçon 2Design de la page Histoire - Partie 1
14m03s
Leçon 3Design de la page Histoire - Partie 2
20m36s
Leçon 4Design de la page Offre - Partie 1
16m43s
Leçon 5Design de la page Offre - Partie 2
23m56s
Leçon 6Design de la page Contact
23m17s
Leçon 7Design de la page Mentions légales
10m55s
Leçon 8Design de la Connexion à l'espace client
14m47s

Aperçus

Avis des apprenants

Détail des avis
73
Apprenants
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Marc Molon
Marc Molon
Publié le 01/04/2024
Formation pour les débutants en UI et/ou Figma. C'est simple, complet, on survole les problèmes mais ce n'est pas un défaut cela permet de se concentrer sur le principal pour être autonome avec les bases. Chouette travail Adrien !
Eric Reynaud
Eric Reynaud
Publié le 07/12/2022
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.
Adrien Gazaix
Adrien Gazaix
Merci Eric ! Oui la 3eme partie sortira j'espère bientôt, et je ne sais pas pour l'intégration c'était pas prévu à la base je vais y réfléchir ;)
Alexandra P
Alexandra P
Publié le 24/11/2022
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.
Adrien Gazaix
Adrien Gazaix
Super ! Oui je vais surement faire un épisode 3 pour boucler correctement cette formation webdesign débutants :) A très bientôt !

Vos questions sur le cours

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.

Payer plus tard

Prix d'achat : 10,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1380 tutos gratuits

Notre politique de protection des données