Concevez des maquettes incroyables avec Adobe XD

Chaque fois que vous souhaitez lancer une nouvelle application, la première étape consiste à créer une maquette de tous les différents écrans que l’application devrait avoir. La maquette Adobe XD permet d’obtenir des suggestions sur l’apparence de la conception finale. La conception d’une maquette vous permettra de valider toutes les exigences fonctionnelles et la conception UX/UI avant le début du développement. Une maquette est une structure filaire dotée d’une couche de surface supplémentaire qui montre la conception visuelle, y compris la typographie, les couleurs, les images et les éléments de conception. Vous pouvez même aller plus loin en utilisant l’outil de prototypage Adobe XD. Vous pourrez créer de fausses interactions entre les écrans. Dans cet article, nous verrons les étapes pour créer une maquette dans Adobe XD.

Étape 1 – Obtenir Adobe XD

Vous pouvez acheter Adobe XD pour 9,99$/mois. Si vous n’êtes pas sûr que ce logiciel soit le meilleur pour créer des maquettes et des prototypes, vous pouvez essayer l’essai gratuit de 7 jours ! Une fois que vous êtes convaincu, cliquez simplement sur « Acheter » pour commencer votre plan. Vous pouvez également décider d’obtenir le pack Adobe complet pour 52,99$/mois. Vous obtiendrez plus de 20 applications Creative Cloud, dont XD, Photoshop, Illustrator et After Effects ! Pour consulter les plans, visitez cette page: plans Adobe XD

Étape 2 – Sélectionnez le projet que vous souhaitez lancer

Vous souhaitez créer des maquettes pour une application mobile ou web ? Adobe XD propose des modèles prédéfinis pour tout type d’appareil et même pour les publications sur les réseaux sociaux. Vous pouvez même créer une taille personnalisée en mettant la largeur et la hauteur souhaitées pour votre maquette. Une fois que vous avez choisi votre modèle, une nouvelle fenêtre s’ouvre dans l’onglet « Design », affichant un premier écran.

• Pour zoomer
  • Ctrl ++
  • Alt + molette de la souris
• Pour dézoomer
  • Ctrl —
  • Alt + molette de la souris

Étape 3 – Création de la maquette

• Définir une couleur pour le fond Cliquez sur le titre de la maquette. Dans le panneau de droite, section « APPARENCE », cliquez à l’intérieur du rectangle de remplissage et choisissez votre couleur.
• Utiliser un kit d’interface utilisateur Dans le panneau de gauche, cliquez sur Get UI kits. Vous êtes redirigé vers le site Web d’Adobe. Vous pouvez également suivre ce lien : https://www.adobe.com/fr/products/xd/features/ui-kits.html#panel-3 De là, vous pouvez télécharger Apple Design, Google Material Design ou encore le kit Bootstrap ! Pour gagner du temps, cliquez sur Ajouter aux bibliothèques. Ensuite, à partir du panneau de gauche, vous pouvez rechercher cette nouvelle bibliothèque et l’utiliser.
• Utiliser un modèle Adobe XD Si vous manquez d’inspiration, certains designers ont la gentillesse de partager leurs designs et modèles. Vous pouvez vérifier ce lien : https://www.uistore.design/types/adobe-xd/ Si un design ou un modèle correspond à vos besoins, vous pouvez le télécharger et commencer à travailler sur votre projet ! Voici un exemple d’application de cuisine, que vous pourrez facilement adapter : https://www.uistore.design/items/caco-cooking-free-ui-kit/
• Organiser les ressources documentaires Tout en travaillant sur vos maquettes, vous devrez réutiliser des ressources documentaires dans chacun de vos écrans. C’est pourquoi il est très important d’organiser judicieusement les ressources documentaires dès le début afin de ne pas perdre de temps. Évitez d’avoir des doublons et mettez en place dès le départ un jeu de couleurs, de styles de caractères et de composants (icônes, pop-ups, boutons etc.)

Étape 4 – Partagez votre maquette avec des collaborateurs

Vous pouvez inviter des personnes à documenter vos maquettes. Cliquez sur l’icône « Inviter au document » et dans la case « Partager le document », ajoutez l’adresse e-mail de la personne avec qui vous souhaitez partager votre projet.

La fin !