Proposez des designs d'exception.

Le wireframe est la première étape d'un site web ou d'une application. Il s'agit de simples dessins au trait — d'ébauches en quelque sorte — définissant la taille et la structure des éléments de page, de la navigation et des fonctionnalités du site. Il permet aux différentes équipes et parties prenantes d'un projet de se faire une idée des flux, de l’état du contenu et des éléments du design.
 
 

Proposez des designs d'exception.
Par exemple, si vous concevez un microsite pour votre entreprise, les wireframes afficheront clairement l'ensemble des pages et de leurs éléments, ainsi que leurs interactions. Cette maquette « dépouillée » de vos designs — sans les couleurs et le texte finaux, ni les aspects visuels secondaires — permet à toutes les parties prenantes de se focaliser sur les fonctionnalités du site, la structure sous-jacente et le flux de l'utilisateur. Étape majeure de la conception, l'élaboration de wireframes met en évidence les éventuelles imperfections et les problèmes de logique.
Tout le monde gagne à utiliser un wireframe, car il permet d'appréhender le projet d'un point de vue ergonomique, d'affiner les idées et d'avoir un cadre sur lequel s'appuyer tout au long du projet. Adobe XD simplifie la création de wireframes. Découvrons ensemble les principales étapes.
  • 1. Démarrage avec des formes simples

  • 1. Démarrage avec des formes simples

    Sélectionnez le format approprié pour votre premier plan de travail, en fonction de l’appareil auquel le design est destiné. Sélectionnez un format prédéfini ou spécifiez un format personnalisé.
    Double-cliquez sur le titre du plan de travail en haut à gauche pour lui donner un nom.
    Avant d'ajouter un objet dans votre plan de travail, demandez-vous à quoi il servira et comment vous souhaitez que l'utilisateur interagisse avec lui. Dans la mesure du possible, tenez-vous en à des formes simples, en laissant à chacun de le soin d'imaginer les détails.

    Vous débutez avec les plans de travail ? Apprenez à les manipuler.

  • 2. Utilisation de formes comme espaces réservés aux images

    Les formes simples, comme les rectangles et les cercles, peuvent servir d'espaces réservés aux images. SI vous souhaitez inclure des images dans vos wireframes, utilisez des formes simples pour les représenter.
  • 2. Utilisation de formes comme espaces réservés aux images
  • 3. Duplication des plans de travail d'interaction

  • 3. Gain de temps grâce aux symboles

    Si vous essayez d'afficher une interaction, vous constaterez que la plupart des écrans de votre application se ressemblent, comme dans un film — les objets principaux, comme les barres de menus et les en-têtes, sont répétés dans chaque écran.
    Inutile de les redessiner entièrement chaque fois que vous ajoutez un plan de travail. Il vous suffit de convertir les objets en symboles, qui s’intègrent facilement dans les plans de travail. Comme leurs liaisons sont préservées, les modifications apportées à un symbole sont automatiquement répercutées dans les autres plans de travail.

    Vous n'avez jamais utilisé de symboles ? Découvrir.

  • 4. Agencement des plans de travail

    Pour sélectionner plusieurs plans de travail et les déplacer simultanément, tracez un rectangle de sélection ou cliquez sur chaque plan de travail souhaité en maintenant la touche Maj. enfoncée. Vous pouvez également utiliser les boutons Disposition ou l'option Disposition du menu pour agencer les plans de travail sélectionnés.
  • 3. Duplication des plans de travail d'interaction
  • 4. Utilisation de grilles

  • 5. Utilisation de grilles

    Les grilles permettent d'aligner le texte et les objets à l'aide de repères. Lorsque vous dessinez, les objets dont les bords se trouvent dans la zone de magnétisme de la grille s’alignent automatiquement sur celle-ci. Les grilles vous permettent également de vous faire rapidement une idée des mesures lorsque vous disposez des objets ou du texte sur vos plans de travail.

  • 6. Animation du wireframe

    Après avoir créé des plans de travail, vous pouvez les lier entre eux à l'aide d'animations qui illustreront les interactions. Adobe XD permet de définir des types de transition entre les écrans : Glisser vers la gauche, Glisser vers la droite, Glisser vers le haut, Glisser vers le bas et Fondu. Vous pouvez aussi définir le rythme et la durée de la transition. Par défaut, Adobe XD applique les derniers paramètres utilisés, ce qui peut accélérer la création des liaisons au sein de votre application si vous choisissez d'appliquer par lots des transitions du même type.
  • 5. Animation du wireframe
  • 1. Démarrage avec des formes simples

  • 7. Partage du wireframe

    Le moment est venu de prévisualiser votre travail. Vous pouvez partager votre design en envoyant un lien ou en l'incorporant dans une page web. Vous pouvez même activer les commentaires pour permettre aux gens de donner leur avis. Vous pouvez également enregistrer un descriptif au format .mov.
    Ouvrez le fichier Adobe XD à partager et cliquez sur l'icône Partage en ligne. Donnez-lui un nom et cliquez sur Nouveau lien ; XD fournit une URL. Si vous souhaitez actualiser l'URL à la suite de modifications apportées au design, cliquez sur Mettre à jour. Vous pouvez afficher le design dans la fenêtre Aperçu ou en plein écran. Vous pouvez également utiliser Aperçu pour enregistrer les interactions.
    Le cas échéant, vous pouvez effectuer des corrections sans fermer la fenêtre d'aperçu. Les changements apportés au prototype seront immédiatement répercutés dans l'aperçu.

En savoir plus

Suivez nos tutoriels XD pour en savoir plus sur le design mobile et voir des experts Adobe en train de créer des wireframes et des prototypes.
À vous de jouer ! Testez les wireframes dans XD.
Si vous avez esquissé certains écrans de votre application ou de votre site web sur papier, essayez d'en reproduire un ou deux avec XD, à l'aide de plans de travail et d'une seule animation. Comme il est possible d’importer des fichiers Photoshop et Illustrator dans XD, vous pouvez désormais ajouter des objets et des plans de travail au moment opportun. Vous découvrirez que vous pouvez créer un wireframe clair et basique pour fournir un aperçu du projet à votre équipe et aux différentes parties prenantes. Vous constaterez ensuite qu'il est possible de l'enrichir facilement pour produire un modèle interactif complet de l'application ou du site web.
Initiation à Adobe XD ›