Créer un wireframe et un prototype de base

Dans le cadre de ce projet, nous allons apprendre à créer un wireframe et un prototype de base d'une application mobile.

Imaginons que vous ayez eu l'idée d'une nouvelle application valant un million de dollars...Ceci ou cela. Dans cette application, les utilisateurs se verront proposer deux options et devront n'en choisir qu'une seule. Génial ! Avant de finaliser votre logo et de commencer à définir le style de votre entreprise, vous devez concevoir quelques wireframes et prototypes de base pour tester votre idée d'application auprès des utilisateurs.

Les wireframes sont des maquettes basse fidélité de pages Web ou d'applications. Vous pouvez utiliser les wireframes pour créer rapidement plusieurs itérations de votre produit final, sans passer trop de temps à vous concentrer sur des éléments tels que les couleurs, les images ou d'autres éléments de design.

Vous pouvez faire évoluer vos wireframes en utilisant des prototypes. Les prototypes sont des designs comportant des éléments interactifs. Ils vous aident à concevoir, tester et montrer comment les utilisateurs vont interagir avec votre produit et y naviguer.

Ensemble, les wireframes et les prototypes vous aident à planifier la manière dont les utilisateurs vont interagir avec votre application et y naviguer.

À la fin de ce projet, vous aurez acquis de l'expérience en manipulant des cadres, des formes, du texte et en réalisant des prototypes dans Figma. Allons-y, commençons.

Concevoir un wireframe avec des cadres, des formes et du texte

Pour élaborer notre wireframe, nous allons utiliser les objets suivants :

• Deux cadres destinés à contenir les designs
• Sept rectangles pour représenter les images et les boutons de l'application
• Quatre calques de texte pour identifier les libellés des boutons clés

Créer un fichier

Pour commencer, il nous faut un nouveau fichier de design.

1. Connectez-vous à votre compte Figma sur figma.com.
2. Dans le navigateur de fichiers, cliquez sur Drafts.
3. Cliquez sur New design file.

Ajouter le premier cadre

Chaque cadre représente une page différente de notre application. Nous voulons également concevoir notre application pour les appareils mobiles, c'est pourquoi nous utiliserons des tailles de cadre prédéfinies. Pour ce projet, nous nous concentrerons sur les deux cadres suivants :

• Un cadre « Ceci ou cela » qui présente deux options
• Un cadre « Ceci » qui affiche ce qui se passe lorsque l'utilisateur choisit « Ceci »

Commençons par le cadre « Ceci ou cela ».

1. Cliquez sur l'icône Frame de la barre d'outils ou appuyez sur F.
2. Dans le panneau Design de la barre latérale droite, sélectionnez le format prédéfini iPhone 14 Pro.

Maintenant que nous avons un cadre, renommons-le. L'établissement d'une structure de dénomination claire facilite la recherche et la gestion des calques dans vos fichiers.

1. Dans le panneau des calques, double-cliquez sur le nom du cadre que vous venez de placer sur le canevas.
2. Renommez le cadre « Ceci ou cela » et appuyez sur Retour (Mac) ou Entrée (Windows).

Ajouter des formes

Comme nous n'avons pas besoin d'entrer dans les détails des couleurs, des styles et du design, nous pouvons utiliser des formes de base pour représenter la disposition de notre application.

Ajoutons des rectangles au cadre « Ceci ou cela » pour représenter les deux options.

1. Sélectionnez l'outil Rectangle ou appuyez sur R et cliquez à l'intérieur du cadre « Ceci ou cela ».
2. Utilisez les champs Width et Height dans la barre latérale droite pour saisir les valeurs en pixels de la forme. Nous avons défini la largeur de notre rectangle sur 319 et sa hauteur sur 240.
3. Cliquez et faites glisser le rectangle pour le placer vers le haut du cadre. Figma tente d'aligner l'objet avec les autres objets qui l'entourent en l'imbriquant automatiquement. Dans ce cas, nous allons placer le rectangle au centre du cadre.
4. Pour personnaliser la couleur de remplissage, sélectionnez le rectangle, puis ouvrez le sélecteur de couleurs dans la section Fill de la barre latérale droite. Nous avons utilisé le code hexadécimal #8ED3E2 comme couleur de remplissage.

Nous souhaitons que le deuxième rectangle ait exactement la même taille, alors dupliquons le premier rectangle.

1. Sélectionnez le rectangle et appuyez sur Command + D (Mac) ou Ctrl + D (Windows) pour le dupliquer.
2. Le nouveau rectangle est placé directement au-dessus du premier rectangle. Cliquez sur le deuxième rectangle et faites-le glisser jusqu'au milieu du cadre.
3. Modifiez la couleur de remplissage du deuxième rectangle. Nous avons utilisé le code hexadécimal #D48C8C comme couleur de remplissage.

C'est parfait ! Prenez le temps de renommer les deux calques rectangulaires que vous avez ajoutés. Nommez le rectangle supérieur « Cette image-ci » et le rectangle inférieur « Cette image-là ».

Maintenant que vous savez comment ajouter et modifier des formes, ajoutez deux autres rectangles pour représenter « Ce bouton-ci » et « Ce bouton-là ». Chaque rectangle a une largeur de 130 et une hauteur de 95. Veillez à renommer les calques. Lorsque vous aurez terminé, votre cadre devrait ressembler à ceci :

Ajouter du texte

Notre premier cadre est presque terminé. Ajoutons du texte pour identifier les boutons « Ceci » et « Cela ».

1. Sélectionnez l'outil Text dans la barre d'outils ou appuyez sur T.
2. Cliquez sur le rectangle en bas à gauche et saisissez « Ceci ».
3. Une fois le calque de texte sélectionné, utilisez les paramètres Text pour définir la taille sur 24.
4. Cliquez sur le calque de texte et faites-le glisser vers le centre du rectangle inférieur. Figma tente d'aligner le calque de texte au centre du rectangle en affichant un guide rouge comme indicateur visuel.

Pour l'instant, le calque de texte se trouve juste au-dessus du calque de rectangle. Nous voulons combiner ces deux calques en un groupe, afin qu'ils puissent être traités comme un seul objet.

Pour grouper ces calques, sélectionnez les deux objets en cliquant et en faisant glisser votre curseur sur eux dans le canevas, en les capturant dans la boîte de sélection bleue. Utilisez ensuite le raccourci clavier suivant pour créer un groupe :

• macOS : Command + G
• Windows : Ctrl + G

Le panneau des calques dans la barre latérale gauche n'affiche plus qu'un seul calque nommé « Groupe 1 ». Renommez-le « Ce bouton-ci ».

Maintenant que vous savez comment ajouter des calques de texte et créer des groupes, créez « Ce bouton-là ». Lorsque vous aurez terminé, votre dessin devrait ressembler à ceci :

Créer le deuxième cadre

Maintenant que notre cadre « Ceci ou cela » est terminé, nous devons réfléchir à l'aspect du cadre suivant.

Si l'utilisateur clique sur « Ce bouton-ci », « Cette image-ci » doit s'agrandir et « Cette image-là » doit disparaître.

Nous n'avons pas besoin de recommencer à zéro. Dupliquons simplement notre premier cadre en cliquant sur Command + D (Mac) or Ctrl + D (Windows). Renommez le nouveau cadre « Ceci ».

Supprimez « Cette image-là » en sélectionnant les objets et en appuyant sur delete.

Ensuite, agrandissez « Cette image-ci » de manière à ce qu'elle occupe la majeure partie du cadre.

Ajouter le prototypage

Nous avons terminé la création d'un wireframe pour deux pages de notre toute nouvelle application mobile.

Nous souhaitons à présent fournir des indications plus claires sur la manière dont ces deux pages fonctionnent ensemble. Comment un utilisateur peut-il passer du cadre « Ceci ou cela » au cadre « Ceci » ? À quels types d'interactions et d'animations peut-on s'attendre lorsqu'on navigue entre les deux pages ?

Nous pouvons répondre à ces questions grâce au prototypage.

Lorsque les utilisateurs cliquent sur le bouton « Ce bouton-ci » dans le cadre « Ceci ou cela », nous voulons qu'ils soient dirigés vers le cadre « Ceci ».

Créons un prototype de connexion pour développer l'interaction :

1. Cliquez sur l'onglet Prototype dans la barre latérale droite.
2. Survolez le calque « Ce bouton-ci » dans le cadre « Ceci ou cela ».
3. Cliquez sur le signe plus bleu sur le bord du bouton, puis faites glisser la connexion vers le cadre « Ceci ». La fenêtre modale Interaction details s'ouvre.
4. Dans le menu déroulant, définissez le déclencheur sur On tap.
5. Définissez l'action sur Navigate to. Dans le menu déroulant, définissez la destination sur le cadre « Ceci ».
6. Dans le menu déroulant Animations, sélectionnez Smart Animate.

Une fois l'interaction créée, quittez la fenêtre modale Interaction details. Appuyez sur le bouton Present de la barre d'outils pour la tester.

Félicitations, vous avez terminé !