web design

Maquettes et prototypes pour application mobile : méthodologie

Si un projet de création d’une application mobile commence évidemment toujours par une idée… Après l’idée, le wireframe, la maquette et le prototype sont les outils des web designers pour vous aider à construire votre application.

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Web designer chez Snoweb
Publié(e) le 21 avril 2021 (Mis à jour le 8 avril 2022)


Mais pourquoi passer par ces étapes ? Et quelle est la différence entre une maquette, un wireframe et un prototype ?

Dans cet article, nous allons faire le point sur ces notions capitales pour concevoir des maquettes mobiles. Nous vous donnerons également quelques conseils pour y parvenir.

Pour enfin transformer votre idée en une application mobile à l'écoute de ses utilisateurs !
Maquette application mobile


1. À quoi servent les maquettes mobiles ?

Pour être très concis, on pourrait vous dire que la maquette vous permet de mettre en forme une idée ! Et c'est le cas ! Grâce aux maquettes, le designer, en charge de les concevoir, fait parler sa créativité dans le but de mettre en avant l'idée de l'application mobile… Et à ce stade, on est encore bien loin de pouvoir tester l’application sur son propre mobile !

En fait, avec la maquette, on commence par se mettre à la place de l’utilisateur final. On va réfléchir comme l'utilisateur pour lui créer une application intuitive et simple d'utilisation avec une expérience utilisateur optimum. À l’aide d’un schéma qui n’est pas complètement détaillé (c’est normal, c’est une maquette !), on constate déjà un certain nombre de choses !

  • Le bouton est-il bien placé ici ?
  • Est-ce que ce bloc de texte est réellement nécessaire ?
  • À quel endroit l’utilisateur pourra-t-il facilement trouver de l’aide ?

Les maquettes permettent aussi de travailler sur l'expérience utilisateur de l'application pour ensuite faire l'UI, le joli !

2. Les étapes de réalisation d’une maquette d’application mobile

Étape 1 : Le wireframe

Le « wireframe » ou maquette fonctionnelle en français, est une ébauche. Plus précisément, c’est un croquis qui représente la structure de votre application. À ce stade, pas de couleur, ni détail. On pose simplement les éléments, souvent sous forme de rectangles :

  • zones de textes
  • emplacement des liens
  • boutons
  • call-to-action
  • menu
On indique aussi toutes les connexions entre les éléments par des flèches.
Maquette application mobile wireframe

Étape 2 : La maquette

Avec la maquette, l’immersion est plus facile ! En effet, ici on commence à entrer plus dans le détail visuel de l’application.

  • La maquette présente
    • la structure
    • le contenu
    • les diverses fonctionnalités

On retrouve alors toutes les vues de l'application. Des images d'intention et du texte de substitution sont ajoutées afin de visualiser tous les éléments.

La maquette peut donc regrouper les éléments suivants :

les éléments de la maquette d'application mobile
Menu

EMPLACEMENT & DESIGN

Bouton d'action

EMPLACEMENT & COULEUR

Images

EMPLACEMENT & TAILLE

les éléments de la maquette d'application mobile
Boutons de navigation

EMPLACEMENT & DESIGN

Panier

EMPLACEMENT & COULEUR

Tunnel d'achat

ÉTAPES & DESIGN

les éléments de la maquette d'application mobile
Espace utilisateur

DESIGN

Fiche produit

EMPLACEMENT & DESIGN

Recherche

EMPLACEMENT & DESIGN

les éléments de la maquette d'application mobile
Connexion / Inscription

DESIGN

Aide

EMPLACEMENT & DESIGN

Statistiques

EMPLACEMENT & DESIGN

Recevez chaque semaine des conseils et nouveauté web design

Recevez le Flocon de neige hebdomadaire avec nos nouveautés et astuces Snoweb.

Afin d'avoir un rendu le plus réel possible, l'UX designer va travailler sur un petit format d'écran. Si vous vous demandez pourquoi, c'est pour être sur que toutes les informations sont visibles à l'écran ! En effet, les écrans de téléphone sont de plus en plus grands, mais tous les utilisateurs n'ont pas les derniers téléphones sortis, il faut donc penser aux modèles plus ancien et/ou avec des écrans plus petits.

Par exemple, si sur un iPhone 12 on peut afficher à l'écran 6 produits, sur un iPhone SE, on ne peut en afficher que 4, il faut donc penser à un scroll dans la vue.
Maquette application mobile test

Étape 3 : Le prototype de l’application

Enfin, le prototype de l’application, aussi nommée maquette interactive, est la version la plus aboutie avant de passer au développement.

Cette fois, ça bouge !

Le prototype montre à la fois :

  • le contenu visuel
  • les interactions entre les éléments
    • boutons
    • pop-up
    • menus

C’est en quelque sorte le premier test de l’application.

Pour faire un parallèle avec la maquette, la maquette montre les interactions entre les vues par des flèches, alors que le prototype le fait réellement.
Exemple maquette application mobile


3. Conseils sur la conception d'une maquette mobile parfaite

Pour réussir ses maquettes mobiles, il est préférable de suivre un ordre bien précis :

  1. Bien suivre un cahier des charges. Pour être bref, le cahier des charge détaille toutes les fonctionnalités design, fonctionnelles et technique d'un projet.
  2. Commencez par définir les menus et ensuite passez à l’organisation écran par écran
  3. En deuxième lieu, réfléchissez et délimitez les zones d’interaction de l’app. Quels sont les liens entre les éléments de la maquette ? Quelle action doit faire l’utilisateur pour interagir avec l’élément (cliquer, glisser…) ?
  4. Sachez quelles sont les fonctionnalités importantes à prévoir ? Par exemple : un espace utilisateur. Oublier une telle fonctionnalité pourrait vous coûter cher !
  5. Pensez UX avant UI ! L’expérience utilisateur est tout aussi importante voire plus importante que le design. L’utilisateur ne doit pas rester bloqué devant un écran sans comprendre ce qu’il doit faire…
  6. Définissez les couleurs à utiliser car elles ont une place importante dans l’expérience utilisateur. Trouvez les bonnes couleurs qui font passer le bon message de marque. Par ici, retrouvez quelques idées pour choisir la couleur parfaite dans votre projet.,

Ce qu'il faut retenir sur la conception de maquette

Cahier des charges

Un cahier des charges complet pour une conception optimale. Soyez force de proposition lors de sa lecture.

Architecture

Commencez par réfléchir à l'architecture de l'application, les menus et aux liens entre les écrans.

Intéractions

Définissez les zones d'interactions sur chacun des écrans, les boutons principaux (clics, glisser...).

Fonctionnalités

Listez toutes les fonctionnalités a développer et à maquetter. Est-ce que ça nécessite des écrans spécifiques ?

Wireframe

Commencer par des wireframes simples avec seulement des formes, pas de texte ni d'images. On va a l'essentiel.

Expérience utilisateur

Testez et re-testez vos maquettes. Vous ne devez jamais rester bloquer à un endroit. La navigation doit être fluide.

Couleurs

Créez des palettes de couleurs en fonction de la marque mais pas que ! Elles vont aider l'utilisateur dans sa navigation.

Prototype

On passe au prototype. Ajouter vos couleurs, des textes temporaires et des images d'intention à vos wireframe.


4. Les pièges à éviter au moment de la construction d’une maquette mobile

  • Ne perdez pas de temps à trop détailler votre maquette. Partez sur une maquette simple que vous peaufinerez par la suite, une fois les premiers écrans validés. Avec la maquette, gardez en tête : « Done is better than perfect » !
  • N’oubliez pas une fonctionnalité ! Un oubli peut vite faire perdre du temps au développeur car une fonctionnalité peut changer toute l’arborescence de l’app ! Un exemple simple est celui du paiement. Nul doute que si vous l’oubliez au départ, le développeur ne pourra pas prévoir à temps les normes et contraintes de sécurité à mettre en place.

5. Maquette pour app’ : comment trouver l’inspiration ?

Il existe de nombreux site qui répertorient des ressources et inspirations pour concevoir des maquettes d’app mobiles. Voici plus précisément nos trois sites ressources préférés :


6. Avec quels logiciels réaliser une maquette d’application mobile ?

Vous savez presque tout sur les maquettes, wireframe et prototypes… Désormais, il est temps de se retrousser les manches et de passer à l’action avec les meilleurs logiciels de design !

D’abord, dans la suite Adobe, très prisée des designers, le logiciel Adobe XD est l’outil parfait pour créer vos maquettes. C'est d'ailleurs notre coup de coeur 💙 et notre outil de prédilection !

Sketch est aussi beaucoup utilisé ! Effectivement, cet éditeur de graphiques vectoriels rend le travail de maquettage très rapide. Une fois que l’outil est maitrisé, c’est un gain de temps assuré ! Par exemple, une fois que vous avez créé un bouton type d’action « connexion » ou « enregistrer », il devient un composant que vous pourrez utiliser à l’infini. Pas besoin de refaire son design (couleur et taille de police).

Pour présenter vos maquettes interactives, Invision est une plateforme vraiment très pratique. Sinon vous pouvez partager votre fichier interactif Adobe XD.

7. Conclusion

La réalisation d'une maquette d'application mobile est un travail fastidieux qui demande énormément de connaissance en UX et en UI. Vous devez bien connaître les utilisateurs, leurs besoins et leurs frustration pour leur créer une application qu'ils auront envi de parcourir.

Je souhaite créermes maquettes d'application mobile
En savoir plus

Le sujet du web design vous fascine, alors ces articles devraient vous intéresser également.

Inscrivez-vous à notre newsletter web design

Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.

Partager cet article sur les réseaux sociaux

Nos derniers articles sur le web design
Inscris-toi à notre newsletter et reçois les dernières nouveautés et astuces en lien avec le web design.
pop-up newsletter web design