Créez des wireframes directement sur le tableau Miro grâce à la bibliothèque de composants de wireframe de Miro. Elle comprend environ 60 modèles de conception d’interface utilisateur qui peuvent être facilement combinés pour vous aider à créer des maquettes uniques à basse-fidélité sans effort.
Wireframes dans la barre d'outils
Ajoutez les wireframes à votre barre d’outils de création pour concevoir aisément.
Ajout des wireframes à la barre d’outils
Modification des composants de wireframing
Choisissez parmi un grand éventail d’éléments pour créer la mise en page d’une page Web, d’un écran de produit ou d’une application mobile de manière détaillée :
- Types d’appareils (téléphone, tablette, navigateur)
- Composants d’interface utilisateur (éléments interactifs de votre wireframe)
- Puces
- Listes
- Cartes
- Composants de barres de progression
- Icônes
Les types d’appareils regroupent des cadres dont les proportions correspondent à la plupart des appareils les plus répandus. Cliquez sur la bordure du cadre pour sélectionner ce dernier et faire apparaître son menu contextuel. À partir de ce menu, vous pouvez modifier le type d’appareil, afficher/masquer l’habillage de l’appareil, modifier l’orientation et le remplir de couleur.
Menu des types d’appareils
💡 Les wireframes de types d’appareils sont collants et agissent comme des pages qui regroupent les objets ensemble, comme nos cadres habituels. Ainsi, lorsque vous ajoutez des composants et des icônes au wireframe, l’ensemble du contenu à l’intérieur de cette structure se déplace et est copié en même temps que le cadre.
Wireframe de types d’appareils collants
💡 Si vous exportez le tableau au format PDF, les wireframes de types d’appareils seront également exportés en tant que pages PDF séparées.
Les composants d’interface utilisateur interactifs préfabriqués vous permettent de créer des prototypes simples à basse-fidélité de pages de site Web et d’écrans de produits en quelques minutes, même si vous n’avez pas beaucoup d’expérience dans le domaine de la conception.
Ajout d’un composant d’interface utilisateur
Double-cliquez pour commencer à apporter vos modifications. En fonction de l’élément que vous avez choisi, vous pouvez en modifier le style, l’état (coché ou non, sélectionné ou désactivé, texte ou élément de substitution, etc.), l’icône ou ajouter une ligne (pour les boutons radio ou cases à cocher).
Modification d’un composant
En ce qui concerne les puces, vous pouvez définir leur couleur, leur icône et leur état (activé, désactivé) et vous pouvez également choisir leur apparence parmi un mode remplissage ou contour.
Ajout d’une puce depuis la bibliothèque de wireframes
Lorsque vous utilisez des listes, vous pouvez choisir une liste primaire ou secondaire et en définir sa couleur. Double-cliquez sur la liste pour définir son icône.
Lorsque vous utilisez des cartes, vous pouvez choisir parmi des cartes sans image, avec une image sur la gauche ou un image sur le dessus, mais également leur définir une couleur et une icône.
Si vous ajoutez une barre de progression, choisissez librement parmi les options de barre de progression rectangulaire, ronde ou à jalons et définissez sa couleur et son état (début, en cours, complétée).
Tirez parti de notre bibliothèque d’icônes intégrée et utilisez les icônes avec les composants d’interface utilisateur ou seules pour gagner du temps et créer des wireframes détaillés.
Dans l’onglet Icons (Icônes) de la bibliothèque de wireframes, vous verrez les icônes et les catégories d’icônes les plus populaires (flèches, nourriture, social, etc.).
Modification d’une icône
Des fonctionnalités puissantes pour créer des wireframes simples en quelques minutes
- Des retours à partir de n’importe quel appareil en temps réel
Collaborez sur vos wireframes en temps réel et récoltez les retours des membres de votre équipe grâce à plusieurs options de communication : commentaires avec @mentions, chat vidéo intégré et plus encore.
- Des intégrations avec Unsplash, IconFinder et bien d’autres
Servez-vous des intégrations Miro avec IconFinder et Unsplash pour créer des wireframes clairs et complets.
- Des cadres, des lignes de connexion et des liens
Utilisez les cadres pour présenter plusieurs pages Web ou écrans de produit ou ajoutez un modèle de wireframe pré-conçu depuis le sélecteur. Reliez-les avec des lignes et utilisez la fonctionnalité Link to (Lier vers) pour visualiser les flux utilisateurs et passer d’un écran à l’autre.
Ancienne bibliothèque
Pour l’instant, les wireframes précédents se trouvent également dans la bibliothèque de wireframes. Il vous suffit de défiler en bas de la liste pour les voir.
Wireframes précédents dans la bibliothèque
⚠️ Veuillez noter que la version précédente de la bibliothèque de wireframes sera rendue obsolète.
Foire aux Questions
- Puis-je développer l’élément de menu déroulant ?
- Non, cette manipulation n’est pas possible pour l’instant. - Puis-je ajouter mes propres éléments à la bibliothèque ?
- Non, vous ne pouvez pas le faire pour l’instant, mais vous pouvez ajouter des icônes provenant des ensembles d’icônes et des formes à votre tableau.