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 !