Adobe XD: l'outil de conception d'interface utilisateur et d'UX gratuit que vous pouvez utiliser dès maintenant

Publicité

Ce n'est pas souvent que vous associez Adobe à des téléchargements «gratuits», mais c'est exactement ce que cette entreprise a fait avec Adobe XD. Il s'agit d'une application de prototypage d'interface rapide pour les appareils mobiles et les sites Web, permettant aux concepteurs de proposer rapidement des conceptions pour des plates-formes spécifiques.

La meilleure chose à propos d'Adobe XD est sa facilité d'utilisation. Même si vous avez peu d'expérience dans la conception de quoi que ce soit, il n'y a qu'une courbe d'apprentissage très progressive pour vous retenir.

Même l'interface utilisateur est rafraîchissante, sans tous les outils et panneaux qui découragent tant de gens des applications comme Photoshop, Illustrator et Lightroom 15 alternatives gratuites à Adobe Lightroom, Illustrator et PhotoshopSouhaitez-vous obtenir gratuitement Adobe Photoshop, Lightroom ou Illustrator? Voici quelques-unes des meilleures alternatives Creative Cloud. Lire la suite . Dans cet article, nous vous présenterons Adobe XD et vous expliquerons ce que vous pouvez et ne pouvez pas en faire.

Qu'est-ce qu'Adobe XD?

Adobe XD est un outil de conception. Il ne créera pas votre application pour vous, mais il vous aidera à présenter une vision ou un prototype à quoi vous voulez que votre prochaine application mobile ou tablette, site Web ou autre interface utilisateur ressemble. L'application utilise des tableaux artistiques - essentiellement des maquettes d'écran - pour fournir une représentation visuelle de la conception de votre application.

Création d'applications mobiles Créez votre première application mobile avec ces offres de cours à prix réduitAvez-vous ce qu'il faut pour développer la prochaine grande application iOS ou Android? Ces forfaits de cours fortement réduits vous apprendront comment cela se fait! Lire la suite et les sites Web qui fonctionnent peuvent nécessiter beaucoup de savoir-faire technique. Adobe XD vous fournit les outils pour transformer une idée en preuve de concept. Lorsque vous aurez terminé, vous aurez un plan à partir duquel vous pourrez travailler, et un plan que vous pourrez modifier à l'infini jusqu'à ce que vous soyez satisfait du design.

De la même manière que le concept art est si important dans les efforts créatifs (voir ce beau concept art de jeu vidéo Où trouver de beaux concepts de jeux vidéo en ligneVous voulez voir quelques-uns des beaux concepts artistiques derrière vos jeux préférés? Voici les ressources artistiques du jeu vidéo à votre disposition! Lire la suite comme preuve), une preuve de concept pour la conception d'interface souhaitée est importante en ce qui concerne la construction de logiciels et de sites Web. Fournir aux programmeurs un concept qui correspond si étroitement au produit fini est un excellent moyen d'aligner vos attentes sur ce qui est possible.

Mieux encore, l'application est conçue de manière à ce que tout le monde puisse l'utiliser. Que vous soyez un designer chevronné, un programmeur ou quelqu'un qui ne possède pas ces deux compétences; Adobe XD peut combler le fossé entre votre vision et vos connaissances techniques. Vous n'avez même pas à apprendre à coder Apprenez à coder en remixant gratuitement les applications existantesCe site vous permet de créer ou de remixer des applications, vous permettant d'être créatif sans craindre de casser quoi que ce soit. Lire la suite pour concevoir une application.

Que peut faire Adobe XD?

Adobe XD est conçu avec quelques applications spécifiques à l'esprit, mais vous pouvez également penser en dehors de la boîte. L'application facilite les choses en incluant des modèles pour:

• Applications pour smartphone: De l'iPhone 5 et SE aux tout derniers modèles; et un modèle Android générique également.
• Applications pour tablette: Avec des modèles pour iPad, les deux tailles d'iPad Pro, Surface Pro 3 et 4 et un modèle de tablette Android générique.
• Sites Web / applications Web: Avec quelques préréglages au choix, y compris Full HD.

Vous n'avez pas à vous en tenir à ces modèles, ils sont juste là pour vous faciliter la vie. Vous pouvez également spécifier une taille d'interface complètement personnalisée (c'est-à-dire un écran) et commencer à concevoir pour à peu près n'importe quelle plate-forme que vous pouvez imaginer.

Si vous concevez une application mobile, vous pouvez télécharger l'application gratuite Adobe XD pour votre plate-forme et exporter vos conceptions pour un aperçu en direct sur votre appareil.

Les kits d'interface utilisateur rendent la vie encore plus facile

Si vous songez à conception pour iOS 7 raisons pour lesquelles le langage de programmation Swift mérite d'être apprisVous devez apprendre le langage de programmation Swift plus tôt que tard si vous ne voulez pas être laissé pour compte. Voici quelques excellentes raisons qui pourraient vous convaincre. Lire la suite , Android, Windows ou une autre plate-forme bien établie; vous pouvez utiliser des kits d'interface utilisateur pour obtenir un coup de main. Il s’agit essentiellement de modèles de projets gérés par Apple, Google, Microsoft et autres, téléchargeables au format de fichier .XD d’Adobe.

Avec les kits d'interface utilisateur, vous pouvez accélérer la production, ce qui vous permet de concevoir votre application en tenant compte des contraintes et des éléments communs observés dans la plate-forme de votre choix. Comme ils sont gérés par les développeurs de la plate-forme, ils sont généralement toujours à jour et complets.

Par exemple, le kit iOS iOS d'Apple comprend des dimensions d'écran vierges pour une gamme d'appareils, des exemples de Clavier iOS, éléments de navigation comme le ruban en haut de l'écran, les boutons bascule iOS et plus. Vous pouvez facilement copier et coller des éléments dans vos plans de travail de conception et créer des prototypes précis.

Adobe gère également quelques autres kits d'interface utilisateur, y compris des échantillons de montres intelligentes compatibles watchOS, un kit de site Web de commerce électronique et un ensemble d'exemples pour la création applications de smartphone de monnaie numérique Top 10 des applications Bitcoin et Crypto-monnaie pour iPhoneIl est maintenant plus facile que jamais d'acheter du Bitcoin, de le convertir en altcoins et même d'investir dans des ICO, le tout depuis votre téléphone avec des applications de crypto-monnaie. Lire la suite . Vous devrez télécharger la version appropriée Kits d'interface utilisateur pour iOS, Conception matérielle de Google et Microsoft Windows séparément.

Un ensemble simple d'outils intégrés

Contrairement aux autres applications graphiques et de conception complexes d'Adobe, XD a une belle interface utilisateur propre avec seulement quelques outils simples. Vous disposez de vos formes de base: rectangles, cercles, lignes et un outil de stylet pour créer des formes personnalisées. Il existe également un outil de texte simple, avec accès à la bibliothèque de polices Typekit (mais pas à la totalité).

Vous pouvez ensuite modifier divers attributs liés à ces éléments, comme l'opacité, la couleur de remplissage, les bordures, les ombres et le comportement de défilement. Enfin, il y a une loupe et un outil de plan de travail pour étendre votre conception.

Adobe XD vous aide à placer des éléments dans des endroits esthétiques en «enclenchant» en place autour des bords de l'écran, au centre du canevas et à d'autres éléments. Vous pouvez remplacer cela si vous le souhaitez en maintenant un bouton enfoncé (sur la version Mac, c'est Cmd).

Le long du bord supérieur de l'application, vous verrez deux bascules: Conception et Prototype. Le design est l'endroit où vous passerez la plupart de votre temps à créer votre vision. Passez en mode Prototype pour ajouter diverses interactions entre les éléments à l'écran. Vous pouvez déclencher des événements et basculer vers différents plans de travail, offrant une expérience utilisateur simple sans aucune ligne de code.

Cela se fait via une simple interface glisser-déposer, par exemple: créer un bouton avec l'outil cercle, créer un nouveau plan de travail avec le résultat de cette pression sur le bouton (par exemple, un onglet différent dans votre application), passez en mode Prototype et faites glisser la flèche du bouton vers votre nouveau plan de travail. Appuyez sur le bouton "Lecture" ou prévisualisez sur votre appareil en direct pour voir comment il se joue.

Vous pouvez même spécifier des transitions et des effets pour les rendre fantaisistes. Il y a quelques limitations assez importantes au mode Prototype. Vous ne pouvez pas vraiment aller trop loin avec cela, mais il sert un objectif et sa mise en œuvre simple le rend facile à utiliser.

Dans quelle mesure la version gratuite d'Adobe XD est-elle limitée?

Étant un produit gratuit, Adobe XD est conçu pour vous accrocher à son flux de travail simple et à ses outils conviviaux sans dépenser un centime. Le plus gros inconvénient de la version gratuite est l'incapacité d'avoir plus d'un prototype partagé actif ou d'un ensemble de spécifications de conception à la fois.

Donc, pour votre premier design ou projet, la version gratuite peut suffire. Lorsqu'il s'agit de partager plus de conceptions ou de projets avec votre équipe ou les développeurs d'applications, vous allez rapidement tomber sur un mur. Vous pouvez toujours exporter vos divers plans de travail sous forme de fichiers .PNG gratuitement, pour toujours via le Fichier> Exporter option.

Cependant, le prototypage partagé et l'interactivité entre les plans de travail sont l'une des caractéristiques les plus remarquables ici. L'application est toujours utile sans elle, mais pas dans la même mesure. Vous ne pouvez pas construire un prototype entièrement réalisé, mais vous pouvez rapidement définir votre conception.

Les autres limitations de la version gratuite incluent un nombre limité de polices Typekit et 2 Go de stockage cloud (par opposition à 100 Go) pour les abonnés Creative Cloud. Si vous décidez de débourser de l'argent pour la version payante, Adobe XD vous coûtera 9,99 $ / mois pour cette application seule ou 52,99 $ / mois pour la suite Creative Cloud complète.

Nous pensons Adobe Creative Cloud en vaut la peine 5 raisons d'acheter Adobe Creative CloudCreative Cloud d'Adobe présente de nombreux avantages. Nous avons compilé une liste de raisons d'investir dans Adobe Creative Cloud pendant que vous le pouvez. Lire la suite , à condition que vous puissiez en tirer suffisamment parti.

Adobe XD est un outil étonnamment convivial

Adobe XD est un outil utile, que vous ayez l'intention de payer ou non. Dans certains cas, vous pourriez vous en tirer avec la version gratuite pour travailler sur de petits projets personnels. En ce qui concerne le travail sérieux et le partage avec les équipes, vous devrez mettre à niveau.

Adobe XD n'est pas l'élément clé de la conception d'interface utilisateur. Les concepteurs utilisent des outils graphiques depuis des années pour créer des maquettes de sites Web, de conceptions d'applications, etc. Vérifiez meilleurs outils graphiques vectoriels Mac pour les concepteurs à petit budget Le meilleur logiciel vectoriel pour les concepteurs Mac à petit budgetVoici le meilleur logiciel vectoriel pour macOS que vous pouvez utiliser gratuitement ou acheter à petit budget. Parfait pour les designers modernes! Lire la suite pour voir des alternatives capables.