Comment créer la maquette d'une application mobile avec Adobe XD

Vous souhaitez vous renseigner sur la création d'une application mobile et connaître les différentes étapes de ce projet ambitieux ? Vous avez raison. Les applications mobiles restent un domaine en expansion et les internautes sont toujours à l'affût de l'appli miracle qui faciliterait leur quotidien ou y apporterait un plus. Pour cette tâche, je vous propose et vous guide dans l'utilisation du logiciel Adobe XD. Ensemble, voyons comment créer la maquette de votre application mobile avec Adobe XD, mais également, pourquoi réaliser cette maquette!

Une application mobile est un logiciel ayant été développé pour une utilisation sur smartphone, il existe également des applications pour les montres connectées ou autres appareils applicatifs.

Les publications sont distribuées de façon gratuite ou payante sur des stores, tels que le PlayStore du côté de Google, ou de l'AppStore du côté d'Apple et iOS.

Nous utilisons tous des applications mobiles au quotidien : notre application de navigateur internet, nos applications de réseaux sociaux, de messagerie... Même votre galerie photo est une application mobile. Ces logiciels sont développés par plusieurs professionnels, des développeurs qui coderont le système même de l'application, ou encore des Ux designers qui auront pour objectif de créer des interfaces à la fois fonctionnelles et ergonomiques.

Si vous n'avez aucune connaissance dans la création d'application mobile, il y a peu de chances (à moins de suivre un long apprentissage) que vous puissiez créer vous-même, et seul, votre application. Cependant, vous pouvez réaliser une maquette de votre application.

Pour réaliser votre maquette, vous devrez faire évaluer sa faisabilité technique par des professionnels. Vous devrez aussi évaluer son coût et pour cela, le plus pratique est de réaliser soit un cahier des charges, soit une maquette de votre application.

Ces fichiers permettront de recenser l'ensemble de vos idées et désirs concernant chacune de vos interfaces. Par exemple :

Cela donnera une idée précise aux professionnels qui devront vous faire un devis et évaluer votre projet.

Quelques étapes sont nécessaires avant la création de votre maquette. Voyons lesquelles.

Dans un premier temps, pour réaliser votre maquette, il est avantageux de choisir le logiciel ou la plateforme grâce à laquelle vous la réaliserez, afin de prendre en compte les possibilités et fonctionnalités, lors de la création de vos croquis et de votre mise en page.

Dans ce cours, nous utiliserons le logiciel Adobe XD. Il s'agit d'un logiciel gratuit qui vous permet de mettre en page une maquette de façon simple et plutôt complète.

Vous pourrez alors créer les mises en page et le design avec vos différentes icônes, mais vous pourrez aussi mettre en relation vos pages et créer à partir d'un bouton ou d'une icône, un chemin de navigation vers une autre page de votre maquette. Une fois le tout paramétré, vous avez la possibilité de faire tester cette maquette et ces chemins de navigation directement depuis votre smartphone et l'application Adobe XD, idéal pour de la mise en situation.

Une fois votre outil choisi, il ne sert à rien de vous lancer sans vous être auparavant décidé quant au contenu de vos différentes pages. Je vous suggère de vous saisir de feuilles et de crayons afin de dessiner vos différentes pages principales et leurs déclinaisons.

Vos pages peuvent varier d'un simple bouton coché ou d'autres détails qui en feront leur unicité. Plus vous réaliserez de pages, plus votre maquette sera complète; il est cependant indispensable de faire un PageMaps de votre application avant de vous lancer sur sa création.

Dans un premier temps, définissez à quelles fonctionnalités seront destinées les pages de votre application. Dans le cas d'un réseau social par exemple, on retrouve souvent parmi les pages principales un profil utilisateur ou un fil d'actualité.

Tentez de classifier l'importance et le caractère prioritaire de vos différentes pages selon les fonctionnalités qu'elles matérialisent.

Une fois que vous connaissez les principales pages de votre application et les pages secondaires, vous pourrez vous mettre à structurer chacune de vos pages de façon complète :

Vous allez pouvoir commencer à réfléchir à une mise en forme de votre application, par exemple, l'affichage d'un menu en bas ou en haut, qui est fixe et ne disparaît jamais. Une page membre qui permet à l'utilisateur de charger une image principale, avec un texte de type biographie.

Réfléchissez avec précision à l'ensemble de votre mise en page, et finalement, à l'identité visuelle de votre application :

Essayez de mettre en page votre idée comme si vous pouviez créer votre application à partir de votre dessin (puisque pour la maquette, c'est ce que nous ferons)

La prochaine étape avant de vous lancer dans la création de votre maquette, c'est de déterminer la PageMaps de votre entreprise, c'est-à-dire, poser vos différentes pages sur un tableau de bord, les unes à côté des autres, et de réaliser un puzzle, un plan, pour mettre en rapport les pages entre elles. Si par exemple vous créez cinq pages pour permettre à vos membres de vous inscrire sur votre application, alors vous regrouperez ces pages entre elles.

L'objectif est d'avoir une vue globale sur toutes les pages de votre application, qui seront alors regroupées et hiérarchisées en fonction de leur contenu, de leur thème ou du scénario auquel elles appartiennent.

Vous pourrez ensuite relier ces différentes pages les unes avec les autres grâce aux chemins de navigation, c'est-à-dire, relier un bouton à une page. Le fait de relier vos chemins de navigation permet de finaliser votre map et de savoir exactement comment vos interfaces s'articulent les unes avec les autres.

Passons maintenant à la création de votre maquette d'application mobile grâce à Adobe XD.

Dans un premier temps, pour pouvoir créer votre maquette, vous devrez prendre en main l'outil Adobe XD. Vous devez donc télécharger le logiciel (je vous ai mis le lien plus haut dans l'article) sur votre ordinateur. Il s'agit d'un logiciel gratuit d'Adobe.

Vous devrez créer un compte sur le Creative Cloud pour l'utiliser. Une fois le logiciel lancé, vous atterrirez sur la page d'accueil, qui vous affiche vos projets déjà créés, seuls et hébergés sur votre ordinateur, ou les documents partagés avec vous. Vous pouvez aussi créer depuis cette interface un nouveau projet, c'est ce que nous allons faire pour ce cours.

Il faut savoir qu'Adobe XD ne permet pas que la création de maquettes pour application mobile, il permet aussi de créer des maquettes de site internet, de posts sur les réseaux sociaux, ou encore de tout types de plateformes aux dimensions personnalisées (par exemple un jeu vidéo).

Pour lancer la création de votre maquette, cliquez sur le format qui vous convient. Adobe ouvrira alors un plan de travail basé sur le format que vous aurez renseigné. Pour ce cours, nous partirons sur l'une des dimensions pré-enregistrées par la plateforme, celles de l'iPhone X.

L'outil de zoom vous permet de différencier les vues de votre plan de travail afin de visualiser l'ensemble de vos pages ou de travailler en plus particulier sur l'une. Vous pouvez également zoomer et dézoomer sur votre écran grâce à votre pad tactile ou à votre souris, ou grâce aux touches de votre clavier "ctrl" et "+" et "ctrl" et "-". Vous pourrez aussi utiliser l'outil loupe.

Le second outil de plan de travail vous offre la possibilité de visualiser vos pages directement depuis un mobile, grâce à l'application Adobe XD, comme nous le verrons un peu plus tard dans ce cours, ou, en les ouvrant de manière individuelle au-dessus de votre plan de travail, afin de tester les boutons et chemins de navigation.

Autre outil proposé par votre plan de travail, le fait d'ajouter quelqu'un à votre équipe afin de travailler à plusieurs sur la création et la mise en page de votre maquette.

L'onglet par défaut "Design" de votre plan de travail vous permet, comme son nom l'indique, de travailler sur le design de vos pages, et donc sur leur forme. L'onglet "Prototype" permet quant à lui de régler les différentes connexions entre les pages et les chemins de navigation.

Le dernier onglet "Partager" vous permet de créer un lien de diffusion pour votre plan de travail et de le partager à votre équipe.

Le curseur vous permet simplement de sélectionner un élément de la mise en page.

Le carré vous permet de réaliser une forme géométrique carrée ou rectangulaire dont vous pourrez modifier les angles, la couleur ou la taille. Cet outil est également disponible avec la forme de cercle ou de triangle. Ils vous permettront de structurer votre mise en page en différentes parties ou de créer des boutons.

L'outil ligne vous permet simplement de créer une ligne.

L'outil plume vous permet de réaliser des formes à main levée et à base de points d'ancrage : lignes, courbes et autre personnalisation.

L'outil texte vous permet d'ajouter du texte dont vous pourrez définir la police, la taille ou la couleur.

L'outil plan de travail vous permet de créer un nouveau plan de travail ou de dupliquer d'un clic une page existante.

L'outil loupe vous permet de zoomer sur vos plans de travail et sur vos pages pour les personnaliser.

Vous aurez aussi la possibilité de lier plusieurs documents en ligne entre eux grâce à la connexion de leurs actifs,

Vous pourrez consulter la liste de l'ensemble de vos plans de travail et les ranger,

Vous pourrez enfin rechercher des plugins à ajouter à vos différentes pages de maquettes.

Enfin, sur la colonne de droite, vous trouverez les paramètres de chaque élément que vous sélectionnerez. Cette partie de l'éditeur vous permettra de personnaliser à votre convenance les différents éléments que vous insérerez : leur taille, leur couleur, leur opacité...

Vous pourrez aussi insérer des images sur votre plan de travail en les important directement depuis un dossier ou en les copiant et en les collant sur le plan de travail voulu.

Ouverte devant vous, la première page de votre plan de travail vous attend, vous allez alors devoir reprendre les schémas et brouillons que vous aurez créé pour reconstituer vos différents éléments grâce aux outils mis à votre disposition. Pour vous donner un exemple, voici la maquette d'une application de type réseau social réalisée avec Adobe XD.

L'application nous permet d'ajouter un fond, et plusieurs photos et icônes dont les fonds sont en transparence.

Vous pouvez utiliser la colonne d'outils située sur la droite de votre écran vous permettant de modifier les cadres de vos photos, en arrondissant les angles ou en ajoutant des bordures ou des ombres.

Vous pourrez créer des "boites" de couleurs plus ou moins opaques, destinées à diviser les différentes parties de votre page, par exemple, les rectangles blancs derrière les avis.

Vous pourrez créer des effets de flous également, et ajouter du texte.

Mettez en page votre maquette en respectant scrupuleusement vos schémas, vous pouvez utiliser des photos ou icônes libres d'utilisation en cherchant sur des banques d'icônes, ou de photos.

En créant l'ensemble de vos différentes pages grâce à l'onglet de design, vous pourrez ensuite les relier grâce à l'onglet prototype. Pour ça, il suffira de cliquer sur un élément indépendant ajouté dans votre interface de design, par exemple, un cadre, un bouton, une image... Le fait de créer ces chemins de navigation vous permettra d'interagir avec vos pages : d'un clic, vous passerez à une autre page de votre maquette, afin de rendre celle-ci plus réaliste et démonstrative.

Pour commencer simplement et prendre en main votre outil, tentez de reproduire cette page d'accueil.

Elle sera facilement reproductible grâce aux outils mis à disposition, et quelques photos et icônes que vous devrez charger de votre ordinateur.

Vous pouvez aussi créer votre première page à partir de votre projet, mais si vous n'avez pas encore pris le temps de réaliser votre schématisation, cela vous donne une bonne idée de consigne pour commencer à mettre doucement en page votre première maquette.

Une fois que vous aurez réalisé une première version de votre maquette que vous enregistrerez, vous pourrez en créer une seconde version, puis une troisième ou même une dixième version pour améliorer votre mise en page et la modernité de votre maquette. Le but est qu'elle donne envie aux personnes à qui vous la faites tester, de voir sortir votre application mobile.

Sur Adobe XD, il y a quelques astuces sympathiques qu'il vous faut connaître :

Vous pouvez allonger vos plans de travail pour que vous puissiez scroller sur votre maquette sur une page longue. Pour cela, il vous suffit de sélectionner un plan de travail en cliquant sur le nom du plan de travail. En bas du plan vous verrez de petites icônes rondes qui vous permettent d'allonger le plan de travail. La partie visible de votre maquette est marquée sur une ligne bleue.

Vous avez la possibilité de dupliquer très facilement un plan de travail en cliquant sur le nom du plan de travail, puis en cliquant sur votre touche "Alt" et en déplaçant votre sélection sur votre écran. Cette fonction est très pratique pour les pages qui ne changent que très peu, par exemple pour une icône cochée ou un bouton abonné/non abonné.

Chaque calque présent sur votre plan de travail peut être nommé et classé dans des groupes afin de se souvenir de chaque élément et de pouvoir les modifier.

Vous pouvez fixer la position d'un élément pour ne plus qu'il se déplace. Cliquez sur votre élément, regardez dans votre liste de calques et cliquez sur le petit cadenas à droite lorsque vous survolez le nom de l'élément. De la même façon, vous pourrez masquer ou afficher un élément.

Vous pouvez facilement copier et coller n'importe quel élément grâce à la touche alt, grâce aux touches "Ctrl" + "c" (copier) et "Ctrl" + "v" (coller), ou grâce au clic droit.

 Le clic droit vous permettra également de réorganiser vos éléments vis-à-vis de leur position, et de pousser un élément vers l'avant ou vers l'arrière.

Prenez le temps de découvrir votre outil et de le prendre en main.
 

Une fois toutes vos pages créées et reliées les unes aux autres, vous pouvez tester vos chemins de navigation grâce à l'outil de lecture sur ordinateur.

Vous avez également la possibilité d'enregistrer votre maquette en ligne afin de pouvoir la tester sur votre smartphone.

Avant de la faire tester à un utilisateur important comme un investisseur ou un client, testez vous-même votre maquette, les chemins de navigation mais aussi les chemins de retour. Faites la tester à vos proches et surtout, enregistrez votre maquette hors connexion une fois qu'elle est prête.

Grâce à elle, vous pourrez non seulement donner un aperçu de votre idée d'application mobile, de manière concrète, tant au niveau du visuel, des fonctionnalités et des chemins de navigation, mais aussi créer de nombreux contenus pour communiquer sur votre application avant même qu'elle ne soit sortie, par exemple :

Vous êtes à présent arrivé à la fin de cet article et j'espère que celui-ci vous aura aidé à créer la maquette de votre application mobile. Je vous remercie pour votre lecture.