Adobe XD

Web Design   

Objectifs

Acquérir les fondamentaux pour mettre en œuvre des prototypes de vos projets web, pour partager "l’expérience utilisateur" et "valider les choix".

À l'issue de la formation, le stagiaire sera capable de :

  • Maîtriser les bonnes pratiques de conception d'interfaces
  • Créer des interfaces interactives de sites Web et d'applications mobiles
  • Réaliser des parcours de navigation répondant aux besoins des utilisateurs
  • Partager et tester des prototypes pour réaliser des interfaces fonctionnelles.

Public concerné

Webmasters, graphistes, concepteurs Web, communication…

Pré-requis

Avoir une bonne connaissance de l'environnement Web. Avoir la pratique courante d'un logiciel de dessin vectoriel et bitmap est un plus

2 jours
Prochaine session

Introduction

  • Présentation d’Adobe XD
  • Les atouts et les enjeux du logiciel

Le prototypage

  • Les étapes de conception
  • Le design d'interface
  • L'architecture de l'information
  • Les tendances du design

Découvrir l'interface d'Adobe XD

  • L'écran d'accueil
  • Barre de menus et barre d'outils
  • Les panneaux de propriétés

Les plans de travail et repères

  • Ajouter et gérer les plans de travail
  • Manipuler les grilles et les repères

Les formes

  • Créer des formes simples
  • Créer des éléments vectoriels avec l'outil Plume
  • Créer une icône

Les textes

  • Saisir du texte
  • Importer des fichiers textes
  • Gérer les styles de texte

Les images

  • Importer des images
  • Créer des masques

Les couleurs

  • Utiliser et gérer les couleurs
  • Créer des dégradés de couleurs
  • Générer des couleurs

La grille de répétition

  • Utiliser et gérer une grille de répétition

Réaliser un écran d'accueil d'application mobile

  • Conception d'une version papier ou maquette filaire détaillée
  • Réalisation de l'interface sous Adobe XD

Symboles et kit UI

  • Créer et manipuler les symboles
  • Sélectionner et utiliser des kits UI
  • Créer deux écrans d'application mobile (connexion / inscription)

Prototyper

  • Créer des interfaces responsives
  • Définir un parcours utilisateur
  • Créer les liens d'interactions
  • Prévisualiser l'interface

Partager

  • Créer des liens de partage
  • Déposer des commentaires

Tester

  • Enregistrer une vidéo des interactions
  • Installer l'application Adobe XD
  • Tester le prototype en direct

Exporter

  • Exporter les plans de travail
  • Choisir les formats d'export (PNG, JPEG...)
  • L'exportation pour les développeurs (Zeplin)