UI/UX - Adobe XD

Projet réalisé avec Adobe XD, exemple de réseau social.

Aperçu fonctionnel

Vous pouvez soit l’ouvrir depuis le fichier Projet WaVe.xd ci-joint, soit via ce lien :

Lancer l’aperçu de la maquette :

1. Animation de la version mobile puis passage au log in. Vous pouvez switcher avec le Sign Up ou cliquer sur e-mail puis password pour remplir qu’ils se remplissent automatiquement. Puis cliquer sur Log In.

2. Page Home des actualités, on peut :

• dérouler pour lire les différentes ébauches d’articles • cliquer sur l’engrenage en haut à droite afin de faire apparaitre un menu OPTIONS pour passer la page en mode « dark theme » • faire glisser vers la droite pour voir les articles populaires • cliquer sur le premier article uniquement (de home) pour le voir en détail

3. Page de l’article détaillé, on peut :

• Dérouler afin de lire l’intégralité de l’article • Dérouler le menu OPTIONS • Faire un retour à la page Home grâce à la flèche située en haut à gauche.

4. Une fois de retour à page Home nous pouvons nous rendre dans le menu OPTIONS puis :

• Passer en mode « dark theme » • Se déconnecter avec « Logout » • Passer à la version PC avec « PC Version »

5. Nous voilà sur la page d’actualité PC, nous pouvons à présent :

• dérouler pour lire les différentes ébauches d’articles • cliquer sur les trois points en haut à droite afin de faire apparaitre un menu OPTIONS pour passer notamment la page en mode « Dark Theme » • Aller sur l’espace discussion via l’icône
• cliquer sur le premier article uniquement pour le voir en détail

6. Une fois sur le premier article ou sur l’espace Conversation vous pouvez retourner à la page d’accueil en cliquant sur l’icône Home dans la barre des tâches.

7. Dans le menu OPTIONS vous pouvez :

• Passez en mode dark theme • Aller sur la page Contact en cliquant sur Contact us • Passer à la version Mobile en cliquant sur Mobile Version • Se déconnecter en cliquant sur Logout 8. Dans la page Contact, vous pouvez remplir directement le formulaire en cliquant dans l’ordre sur : • Topic • E-mail • Files (pour joindre un fichier) • Message • SEND

9. En cliquant sur la flèche de retour en haut à gauche, vous arriverez sur la page de Login et Signup. Seul les champs de Login sont remplissable.

Depuis le footer, vous pouvez accéder directement à :

• La page Contact
• La version Mobile
• A la page de connexion
• Aux icônes créées et utilisées pour ce projet (cliquez sur Icônes : pour revenir à la page login)
• À la typographie utilisée (cliquez sur Typographie : pour revenir à la page login)
• À la colorimétrie utilisée (cliquez sur Couleurs Utilisées : pour revenir à la page login)