Orsys

Adobe XD, concevoir l’expérience utilisateur

Par Orsys

Objectifs

À l’issue de la formation, le participant sera en mesure de :

  • Comprendre l’intérêt d’Adobe XD
  • Maîtriser l’interface du logiciel
  • Conserver la ligne graphique
  • Partager le prototype
  • Mettre en place l’interactivité

Découverte de l'interface d'Adobe XD

  • Qu'est-ce que Adobe XD ?
  • Les atouts et les enjeux du logiciel.
  • L'écran d'accueil d'Adobe XD, toutes ses particularités.
  • La barre de menus et la barre d'outils.
  • Les panneaux de propriétés.

Travaux pratiques
Découverte de l'interface.

Les étapes de conception

  • Le design d'interface.
  • Utiliser les grilles de répétition.
  • L’intégration de la charte graphique dans les wireframes.
  • Harmoniser la conception (styles de texte, couleurs…).
  • La gestion des différentes transitions et animations.
  • Les méthodologies du prototypage rapide.

Travaux pratiques
Incorporation de la charte graphique dans la conception d’une première maquette.

Les outils de dessins et la gestion des textes

  • La création de formes simples.
  • La création des éléments vectoriels.
  • Les icônes et les écrans de matériel.
  • La saisie de texte.
  • L’importation des fichiers textes.

Travaux pratiques
Création de menus de navigation et de blocs de contenus avec les outils vectoriels.

Le paramétrage des images et l’application des couleurs

  • L’importation de fichier sources.
  • La création de symboles.
  • La gestion des calques.
  • La création de nuanciers.

Travaux pratiques
Importation de fichiers sources (Photoshop, Illustrator) et incorporation dans des calques.

L’interface d’application mobile et le prototypage

  • La création des interfaces responsives.
  • La conception d'une maquette détaillée.
  • L’organisation des artboards.
  • L’utilisation de l’inspecteur.
  • Designer avec des UI-Kits.
  • Les kits de design d'interfaces, Material Design.

Travaux pratiques
Conception d’interface responsive pour les terminaux mobiles.

Propriétés partagées et communes

  • Redimensionnement dynamique des composants.
  • Créer deux écrans d'application mobile (connexion/inscription).

Partage des conceptions et des prototypes

  • Le partage et la mise en place du test.
  • Les commentaires et les ressources liées.
  • Les tests de support mobile.

Travaux pratiques
Mise à disposition de partages et de tests utilisateur coté client.

PDF

Imprimer

Envoyer

Envoyer la page à :

Programme

Découverte de l'interface d'Adobe XD

  • Qu'est-ce que Adobe XD ?
  • Les atouts et les enjeux du logiciel.
  • L'écran d'accueil d'Adobe XD, toutes ses particularités.
  • La barre de menus et la barre d'outils.
  • Les panneaux de propriétés.

Travaux pratiques
Découverte de l'interface.

Les étapes de conception

  • Le design d'interface.
  • Utiliser les grilles de répétition.
  • L’intégration de la charte graphique dans les wireframes.
  • Harmoniser la conception (styles de texte, couleurs…).
  • La gestion des différentes transitions et animations.
  • Les méthodologies du prototypage rapide.

Travaux pratiques
Incorporation de la charte graphique dans la conception d’une première maquette.

Les outils de dessins et la gestion des textes

  • La création de formes simples.
  • La création des éléments vectoriels.
  • Les icônes et les écrans de matériel.
  • La saisie de texte.
  • L’importation des fichiers textes.

Travaux pratiques
Création de menus de navigation et de blocs de contenus avec les outils vectoriels.

Le paramétrage des images et l’application des couleurs

  • L’importation de fichier sources.
  • La création de symboles.
  • La gestion des calques.
  • La création de nuanciers.

Travaux pratiques
Importation de fichiers sources (Photoshop, Illustrator) et incorporation dans des calques.

L’interface d’application mobile et le prototypage

  • La création des interfaces responsives.
  • La conception d'une maquette détaillée.
  • L’organisation des artboards.
  • L’utilisation de l’inspecteur.
  • Designer avec des UI-Kits.
  • Les kits de design d'interfaces, Material Design.

Travaux pratiques
Conception d’interface responsive pour les terminaux mobiles.

Propriétés partagées et communes

  • Redimensionnement dynamique des composants.
  • Créer deux écrans d'application mobile (connexion/inscription).

Partage des conceptions et des prototypes

  • Le partage et la mise en place du test.
  • Les commentaires et les ressources liées.
  • Les tests de support mobile.

Travaux pratiques
Mise à disposition de partages et de tests utilisateur coté client.

Formations de la même catégories (5)

Feel Europe
Créer un site web REST avec Python et FlaskPar Feel Europe

Maitriser le développement d’un site Web moderne avec le framework Flask.

CCM Benchmark
UX et E-commercePar CCM Benchmark

Cette formation fournit les pistes à suivre pour améliorer la qualité de son site e-commerce, mettre en valeur son offre, optimiser l'accès aux fiches produit et le processus de commande et de paiement en ligne.
Elle s'appuie sur des exemples issus des dernières refontes et sur les initiatives récentes les plus exemplaires.

IB Formation
Ergonomie et UX design d'interfaces graphiques pour appareils tactilesPar IB Formation

Si le marché des ventes de PC s’essouffle, celui des tablettes et smartphones continue d’afficher de bonnes performances. C’est dire l’engouement du grand public pour ces appareils. Face à ce phénomène, les entreprises "commerciales" se doivent de réagir et de proposer, comme il y a quelques années sur Internet, des applications (Apps) ou des sites web adaptés à ces appareils. Mais la diversité des tailles d’écrans comme la nécessité de proposer une navigation "tactile" très intuitive impose une sérieuse réflexion quant au design et à l’ergonomie de ce type d’interfaces. A l’issue de cette formation, les participants disposeront des connaissances et compétences qui leur permettront de réaliser des applications web ou des sites web conviviaux pour tous les utilisateurs (web et mobiles).

Orsys
Analyse et ergonomie des IHM logiciellesPar Orsys

Qu’il s’agisse d’écrans directement intégrés aux machines, d’écrans d’ordinateur, de tablettes tactiles ou de Smartphones, le but des interfaces reste de dialoguer avec un utilisateur et de répondre à ses besoins. Afin découvrir ces besoins et le rôle de l’ergonome, cette formation vous présentera des méthodes de design d’interface centré utilisateur, et vous fera découvrir les principes d’ergonomie essentiels pour concevoir et auditer une IHM.

Orsys
Responsive web design: les techniques modernes de mise en pagePar Orsys

Ces tutoriels de formation 100% à distance ont pour objectifs de vous apprendre des techniques modernes de mise en page afin de créer des sites web dont l'affichage s'adapte automatiquement aux écrans sur lesquels ils sont diffusés. Ils s’adressent à un public de créateurs de site web, designers, chefs de projets, webmasters ou toute personne disposant des connaissances de base en langages HTML et CSS qui souhaite s'initier au responsive web design . La pédagogie s'appuie sur un autoapprentissage séquencé par actions de l’utilisateur sur l’environnement à maîtriser.