15,00

Tuto Webdesign débutants - Episode 2 : Déclinaison des pages & Prototype animé avec Figma

15,00

  • Une formation vidéo de 2h15m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Webdesign débutants - Episode 2 : Déclinaison des pages & Prototype animé

ajouter ce cours aux favoris retirer ce cours des favoris

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 gratuit 00:11:33
    • Design de la page Histoire - Partie 1 00:14:03
    • Design de la page Histoire - Partie 2 00:20:36
    • Design de la page Offre - Partie 1 00:16:43
    • Design de la page Offre - Partie 2 00:23:56
    • Design de la page Contact 00:23:17
    • Design de la page Mentions légales 00:10:55
    • Design de la Connexion à l'espace client 00:14:47



Formateur : Adrien Gazaix

Adrien Gazaix a publié 202 tutoriels et obtenu une note moyenne de 4,8/5 sur 60 463 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-4663-3487 laissé 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.
    "Super ! Oui je vais surement faire un épisode 3 pour boucler correctement cette formation webdesign débutants :) A très bientôt !"

  • 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.
accédez à plus de 1462 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données