Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Adobe XD

Créer des designs

Adobe XD

Créez des maquettes web pour tous vos projets avec Adobe XD. Conception d'applications web, de sites internet, de jeux vidéos, de chartes graphiques, etc.

Nuage-background

En chiffres

icon-star
4,6 / 5 (856 avis)
icone money
11,99 € / mois

Cas d'applications

Conception d'applications

Conception de sites web

Conception de marques

interface de conception de l'outil de web design adobe XD

Qu'est-ce Adobe XD ?

Adobe XD est un outil de design conçu pour créer des prototypes UX et UI. Dédié aux web designers, l'outil de la Suite Adobe embarque de nombreuses fonctionnalités permettant de concevoir des interfaces web : gestion de l'ergonomie, création de maquettes tous supports (gestion du responsive), intégration d'éléments graphiques, ajout d'animations, etc. 

Au-delà de la conception de la maquette, adobe XD permet de rendre le prototype interactif en y intégrant des animations et interactions. L'idée est donc de permettre aux UX et UI designers de se projeter au plus près de la future plateforme web et ainsi mieux collaborer avec les développeurs. 

Fonctionnalités de l'outil

Maquettes UX & UI

Adobe XD est avant tout un outil conçu pour designer. De nombreuses fonctionnalités et outils intégrés à Adobe XD vous permettront de concevoir tous types de maquettes web.

Design

Bien que l'outil ne propose pas des fonctionnalités de design aussi poussées que des outils comme Photoshop ou After effect, vous aurez tout de même de quoi faire de belles maquettes. La vision du design ici repose essentiellement du des éléments de web design. Vous retrouverez donc des fonctionnalités dédié à l'optimisation d'éléments tel que :

  • vos boutons : gérer les tailles, les formes, les couleurs, l'apparence selon l'état du bouton (cliqué / non cliqué / survolé / inactif)
  • vos typographies : gérer les tailles, la largeur, l'espacement entre les lettres, l'espacement entre les lignes, etc. 
  • vos backgrounds : gérer la couleur, l'opacité, l'accessibilité, la juxtaposition des éléments et leur position dans la maquette
  • vos composants : créez des éléments web facilement duplicables et modifiables depuis un seul et même composant. 
  • vos icônes : intégrez vos icônes, modifiez leur apparence, tenez une visual library, etc.
  • votre design system : créez et faites facilement évoluer le design system de vos projets

Prototype animés

Une fois vos maquettes réalisées, Adobe XD vous permet de leur donner vie, en y ajoutant toutes les possibilités d'interactions. L'idée est d'aller au plus près de la future plateforme web, et de se projeter comme réel utilisateur. Vous pourrez par exemple interagir avec les boutons, tester vos animations, vous immerger dans le futur produit.

Plusieurs avantages à cela :

  • Un moyen de tester l'expérience utilisateur
  • Tester la cohérence du design et de l'UI
  • Un moyen de tester le maillage interne du site
  • Un moyen d'être au plus juste dans la conception
  • Meilleur passation de la maquettes aux équipes de développeurs

Avantages

L'outil est compatible avec l'ensemble des outils de la suite Adobe. Vous pourrez ainsi très facilement créer des animations avec After Effects, retoucher vos visuels dans Photoshop puis intégrer le tout sur vos maquettes Adobe XD.

Inconvénients

Contrairement à des outils comme Figma, la collaboration sur adobe XD reste très limitée. Un point assez bloquant notamment lorsque l'on veut travailler à plusieurs sur un même projet web, en collaboration avec des équipes de design, marketing, ou encore avec des clients. 

Découvre plus de ressources sur

Adobe XD

En cours de rédaction... Mais, si tu souhaites que la rédaction s'accélère, n'hésite pas à remplir la boîte à idée !

(Ça va nous réveiller ! 😴)
Lien vers la boîte à idée
Ou des vidéos sur la
Mockup 3D d'un super hero
starts-vector