Designer un mini-site onepage interactif avec Adobe XD
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Designer un mini-site onepage interactif avec Adobe XD

Adrien Gazaix

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto Adobe XD en vidéo, je vous propose de créer ensemble un mini-site onepage interactif en prenant l'exemple d'un CV en ligne.
Toutes les manipulations sont expliquées pas à pas, et le tuto peut être suivi facilement par les débutants.

Le tuto XD mini site va se déroule en 5 étapes

  • Découverte du panneau "actifs" afin d'ajouter les couleurs et les styles de caractères dont nous aurons besoin pour la maquette. Création d'un plan de travail adapté au type de site choisi (onepage).
  • Mise en place des 3 parties du site avec leurs couleurs de fond respectives, et positionnement du menu fixe composé d'icônes.
  • Ajouter du contenu sur le site : background avec opacité, titres, textes, avatar, bouton.
  • Créer le prototype : rendre le site interactif en ajoutant des liens sur le menu qui mèneront vers les différentes parties du site.
  • Découverte de la notion d'état de composant afin de créer un état de survol sur un bouton ainsi qu'une action d'animation au clic.

Je vous invite à regarder l'extrait vidéo pour vous rendre compte du résultat final.
Les sources (fichier XD final + médias utilisés) sont fournis avec le tuto.

Allez, en avant !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mettre en place le plan de travail, les couleurs et les styles de caractères
Leçon 2
Créer les 3 parties du site ainsi que le menu fixe
Leçon 3
Ajouter du contenu sur notre site
Leçon 4
Créer un prototype pour rendre le site interactif et animé
Leçon 5
Changer l'état de survol d'un bouton et faire une action d'animation au clic

Plan détaillé du cours

Leçon 1Mettre en place le plan de travail, les couleurs et les styles de caractères
11m10
Leçon 2Créer les 3 parties du site ainsi que le menu fixe
11m24
Leçon 3Ajouter du contenu sur notre site
17m32
Leçon 4Créer un prototype pour rendre le site interactif et animé
11m32
Leçon 5Changer l'état de survol d'un bouton et faire une action d'animation au clic
06m05

Aperçus

Avis des apprenants

Détail des avis
200
Apprenants
4
Commentaires
4,5/5
Note moyenne
5/5
3
4/5
0
3/5
1
2/5
0
1/5
0
Ecila31
Ecila31
Publié le 27/11/2020
Explications claires, en pas à pas. Merci
Wakapa
Wakapa
Publié le 21/11/2020
Merci pour la découverte de ce logiciel très simple à utiliser au final
Olivier Maureaux
Olivier Maureaux
Publié le 11/07/2020
Bon tuto avec des astuces intéressantes pour commencer, merci

Vos questions sur le cours

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

Adobe XD 2020

Que contient le fichier source ?

Le fichier XD final ainsi que les médias nécessaires à la création de la maquette (icônes, images).

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1401 tutos gratuits

Notre politique de protection des données