Article original : What is Wireframing? How to Go from Paper Sketches to High Fidelity Wireframes

Qu'est-ce que les Wireframes ?

Les wireframes sont des représentations visuelles de la structure, de la mise en page et de la fonctionnalité d'un site web, d'une application ou d'un autre produit numérique.

Vous les créez généralement lors des premières étapes du processus de conception, et ils fournissent une vue simplifiée et ciblée de l'interface utilisateur et de l'expérience utilisateur.

Vous pouvez créer un wireframe à l'aide de divers outils, y compris du papier et un crayon, des tableaux blancs, ou des logiciels numériques spécialisés. Ils se composent généralement de formes de base, de lignes et de texte, et visent à communiquer la hiérarchie de l'information, le placement des éléments interactifs et le flux des interactions utilisateur.

Les wireframes servent de plan pour le processus de conception. Ils permettent aux concepteurs et aux parties prenantes d'itérer et d'affiner rapidement les idées avant d'investir du temps et des ressources dans la création d'un prototype entièrement fonctionnel ou d'un produit final. Ils sont un outil essentiel pour créer des expériences numériques efficaces et conviviales.

Pourquoi le Wireframing est-il Important ?

Le wireframing est un processus important dans la conception de sites web et d'applications car il aide les concepteurs à planifier et à communiquer la mise en page et la fonctionnalité d'un site web ou d'une application avant qu'il ne soit construit. Voici quelques raisons pour lesquelles le wireframing est important :

  1. Le wireframing aide les parties prenantes à visualiser la structure de la conception : Le wireframing permet aux concepteurs de créer une représentation visuelle de la structure du site web ou de l'application. Cela inclut la mise en page des pages, la navigation et le placement de divers éléments.
  2. Il aide les concepteurs à se concentrer sur la fonctionnalité : Avec le wireframing, les concepteurs peuvent se concentrer sur la fonctionnalité du site web ou de l'application sans être distraits par les couleurs, la typographie et autres éléments de conception.
  3. Il fait gagner du temps et de l'argent : Le wireframing peut faire gagner du temps et de l'argent à long terme en identifiant les problèmes potentiels et en apportant les modifications nécessaires dès le début du processus de conception, plutôt que pendant la phase de développement.
  4. C'est un moyen facile de recueillir des commentaires : Les wireframes sont un excellent moyen de recueillir des commentaires des parties prenantes et des utilisateurs, car ils fournissent une représentation claire et simple de la conception sans éléments visuels distractifs.
  5. Planifier pour un design réactif : Le wireframing est essentiel lors de la conception pour différentes tailles d'écran et appareils. Il permet aux concepteurs de planifier pour un design réactif et de s'assurer que le site web ou l'application fonctionne bien sur tous les appareils.

Types de Wireframes

Chacun a une manière spécifique de faire des wireframes. Certains concepteurs passent des croquis sur papier aux wireframes haute fidélité ou des wireframes basse fidélité aux wireframes haute fidélité.

Tout dépend du projet particulier sur lequel le concepteur travaille, de ce qu'il entend réaliser et du délai dont il dispose.

Croquis sur Papier

Je commence mon processus de wireframing en faisant d'abord des croquis sur papier, car cela me permet de sortir mes idées très rapidement sans avoir à me soucier de la propreté et de la qualité. Cela fait également gagner du temps lors de la conception - vous pensez simplement à des solutions rapides et les mettez sur papier.

Quelques Techniques pour les Croquis sur Papier

  • Crazy Eights

Dans le monde du design, "Crazy Eights" est un exercice de croquis rapide qui aide les concepteurs à générer rapidement une variété d'idées de design et à explorer différentes solutions à un problème, en peu de temps.

Voici comment faire Crazy Eights en design :

  1. Commencez avec une feuille de papier blanche et pliez-la en deux, puis en deux à nouveau, et une fois de plus pour obtenir 8 rectangles sur la page.
  2. Réglez un minuteur pour 8 minutes.
  3. Dans le premier rectangle, esquissez une idée pour le problème de design sur lequel vous travaillez. Cela n'a pas besoin d'être parfait, il suffit de noter l'idée de base sur le papier.
  4. Lorsque le minuteur sonne, passez au rectangle suivant et esquissez une nouvelle idée. Continuez jusqu'à ce que vous ayez rempli les 8 rectangles.
  5. Une fois que vous avez terminé les 8 croquis, prenez quelques minutes pour examiner vos idées et identifier les plus fortes.
  6. Utilisez les idées les plus fortes comme point de départ pour votre design, et continuez à affiner et à itérer jusqu'à ce que vous ayez un produit final.

Vous verrez un exemple de cela dans un instant lorsque je vous guiderai à travers mon processus de wireframing.

  • Croquis de 20 Secondes

Réglez un minuteur pour 20 secondes et esquissez un objet ou une scène simple. Répétez cet exercice plusieurs fois, en essayant de capturer autant de détails que possible dans chaque croquis.

  • Croquis Collaboratif

Associez-vous avec une autre personne et alternez pour ajouter à un croquis. Chaque personne a un temps limité pour ajouter son propre élément unique au dessin. Cet exercice encourage la collaboration et l'improvisation.

Wireframing Basse Fidélité

Le wireframing basse fidélité est une technique de création d'une représentation visuelle approximative d'une conception à l'aide de formes simples, de lignes et de texte. Les wireframes basse fidélité sont les plus basiques des wireframes. Ce type de wireframing est généralement réalisé avec un stylo et du papier, ou avec un outil numérique qui permet des croquis rapides et peu détaillés.

La plupart du temps, ils se concentrent sur le contenu principal et la structure de l'interface, et sont simples et directs. Les wireframes basse fidélité sont un outil utile pour les concepteurs afin d'explorer et d'itérer rapidement différentes options de mise en page et de contenu, sans se perdre dans les détails qui peuvent distraire de la direction générale de la conception.

Avantages du Wireframing Basse Fidélité

  • Vitesse : Les wireframes basse fidélité peuvent être créés rapidement et facilement, permettant aux concepteurs d'explorer plusieurs idées en peu de temps.
  • Flexibilité : Les wireframes basse fidélité sont faciles à modifier et à changer au fur et à mesure que la conception évolue, permettant aux concepteurs d'itérer rapidement.
  • Concentration : En se concentrant sur la structure et la mise en page d'une conception, le wireframing basse fidélité aide les concepteurs à éviter de se laisser distraire par des détails qui peuvent ne pas être pertinents.
  • Collaboration : Les wireframes basse fidélité peuvent être facilement partagés et discutés avec d'autres membres de l'équipe, permettant une plus grande collaboration et des commentaires.

Inconvénients du Wireframing Basse Fidélité

  • Manque de Détails : Les wireframes basse fidélité peuvent ne pas fournir suffisamment de détails pour transmettre pleinement la conception prévue, ce qui peut entraîner des incompréhensions et des malentendus.
  • Interactivité Limitée : Les wireframes basse fidélité sont statiques et ne permettent pas d'interaction, ce qui peut rendre difficile le test de l'utilisabilité et du flux utilisateur.
  • Réalisme Limité : Contrairement aux wireframes haute fidélité, les wireframes basse fidélité peuvent ne pas représenter avec précision le produit final, ce qui peut rendre difficile la communication de la conception aux parties prenantes qui peuvent ne pas être familières avec les wireframes.

Pourquoi Vous Pourriez Vouloir Utiliser des Wireframes Basse Fidélité

  • Pour la conceptualisation en phase initiale : Les wireframes basse fidélité sont excellents pour la conceptualisation en phase initiale. Parce qu'ils permettent d'itérer et d'expérimenter rapidement différentes options de mise en page sans se perdre dans les détails visuels, les wireframes basse fidélité sont extrêmement utiles lors des étapes initiales de votre conception.
  • Pour l'efficacité en termes de temps et de ressources : Dans des situations où le temps est d'une grande importance, les wireframes basse fidélité aident à apporter des modifications plus rapidement, économisant du temps lorsque cela est nécessaire. De plus, cela nécessite moins de ressources, ce qui est idéal pour des situations où les ressources sont limitées.
  • Pour les tests utilisateurs et les commentaires : Les wireframes basse fidélité fournissent une représentation claire de la structure globale de votre conception, permettant des commentaires plus faciles de la part des parties prenantes et des membres de l'équipe. Les wireframes basse fidélité sont également importants lors des sessions de tests utilisateurs, car ils aident à collecter des informations précieuses sur la structure fondamentale et la fonctionnalité d'une conception, avant d'investir des efforts significatifs dans la conception visuelle.

Wireframing Fidélité Moyenne

Le wireframing de fidélité moyenne fait référence aux wireframes qui sont créés avec un niveau modéré de détails et d'éléments de conception. Ces wireframes se concentrent généralement sur la structure globale d'un produit et peuvent inclure une typographie de base et des éléments de conception.

Avantages du Wireframing Fidélité Moyenne

  • Processus de Conception Efficace : Le wireframing de fidélité moyenne peut être complété rapidement et efficacement, permettant aux concepteurs d'itérer et de tester leurs conceptions plus rapidement.
  • Rentable : Les wireframes de fidélité moyenne sont moins coûteux à créer que les wireframes haute fidélité, ce qui en fait une option plus rentable pour les projets de conception.
  • Tests d'Utilisabilité : Les wireframes de fidélité moyenne peuvent être utilisés pour des tests d'utilisabilité, fournissant des informations sur le comportement de l'utilisateur et l'interaction avec le produit.
  • Flexibilité : Définitivement l'un des avantages les plus importants des wireframes de fidélité moyenne. Les wireframes de fidélité moyenne sont moins détaillés que les wireframes haute fidélité, ce qui facilite les modifications et les changements de direction de conception pendant le processus de conception.

Inconvénients du Wireframing Fidélité Moyenne

  • Moins Réaliste : Les wireframes de fidélité moyenne peuvent ne pas représenter avec précision l'apparence finale de la conception, ce qui peut affecter les attentes des parties prenantes et des clients.
  • Détails Visuels Limités : Les wireframes de fidélité moyenne ne fournissent pas autant de détails que les wireframes haute fidélité, ce qui rend difficile la communication de la vision finale de la conception aux parties prenantes.
  • Limitations de l'Expérience Utilisateur : Parce que les conceptions de fidélité moyenne n'ont pas assez de détails visuels pour tester efficacement l'expérience utilisateur, ce qui peut entraîner des problèmes potentiels d'utilisabilité.

Vous verrez un exemple de cela ci-dessous lorsque nous passerons en revue mon processus.

Pourquoi Vous Pourriez Vouloir Utiliser des Wireframes Fidélité Moyenne

  • Pour Affiner la Structure et le Contenu : Lorsque vous devez affiner la structure, le contenu et la mise en page de votre conception, les wireframes de fidélité moyenne sont bénéfiques. Ils vous permettent d'ajouter plus de détails à vos wireframes tout en étant relativement rapides à créer et à modifier.
  • Architecture de l'Information : Les wireframes de fidélité moyenne fournissent une structure plus claire et une représentation visuelle de la conception, montrant mieux le flux utilisateur que les wireframes basse fidélité.
  • Présentation et Approbations des Parties Prenantes : Les wireframes de fidélité moyenne sont plus polis et attrayants que les wireframes basse fidélité. Cela en fait un outil plus efficace lors de la présentation des idées de conception aux parties prenantes et aux clients.
  • Cohérence de la Conception : En ajoutant plus de détails visuels aux wireframes, un langage de conception cohérent peut être établi sur plusieurs écrans ou pages.

Wireframing Haute Fidélité

Le wireframing haute fidélité fait référence à la création de wireframes détaillés et visuellement riches qui ressemblent étroitement au produit final ou au site web.

Ces wireframes sont souvent créés à l'aide d'outils comme Adobe XD ou Figma et incluent des éléments comme la typographie, les schémas de couleurs et les éléments détaillés de l'interface utilisateur.

Avantages du Wireframing Haute Fidélité

Certains avantages des wireframes haute fidélité incluent :

  • Représentation Détaillée : Les wireframes haute fidélité fournissent une représentation plus détaillée du produit final, facilitant la communication de la vision de conception aux parties prenantes.
  • Tests Efficaces : Les wireframes haute fidélité peuvent être utilisés à des fins de test, aidant les concepteurs à identifier les problèmes d'utilisabilité avant le début de la phase de développement.
  • Meilleure Expérience Visuelle et Utilisateur : Les wireframes haute fidélité sont esthétiquement plaisants et fournissent une vue plus réaliste du produit final, ce qui aide les utilisateurs à mieux visualiser la conception. Cela donne aux utilisateurs une meilleure compréhension de la manière d'interagir avec le produit.

Inconvénients du Wireframing Haute Fidélité

  • Chronophage : Les wireframes haute fidélité prennent plus de temps à créer que les wireframes basse fidélité. Il peut être difficile de compléter les wireframes haute fidélité dans des délais de projet serrés.
  • Coût : Les wireframes haute fidélité peuvent être coûteux à créer, car ils nécessitent une quantité significative de compétences et d'efforts de la part de l'équipe de conception.
  • Flexibilité Limitée : Les wireframes haute fidélité ne sont pas aussi flexibles que les wireframes basse fidélité ou moyenne fidélité. Ils sont détaillés et spécifiques, ce qui rend difficile le changement de direction de conception une fois qu'ils sont terminés.

Vous verrez un exemple de cela dans un instant lors de la présentation de mon processus.

Pourquoi Vous Pourriez Vouloir Utiliser des Wireframes Haute Fidélité

  • Transmission au Développement : Les wireframes haute fidélité fournissent des visuels précis, des spécifications détaillées et des actifs de conception qui facilitent le processus de transmission aux développeurs.
  • Réalisme Visuel Élevé : Les wireframes haute fidélité ressemblent étroitement à la conception visuelle finale et fournissent une représentation réaliste de l'interface utilisateur, aux utilisateurs potentiels et aux parties prenantes.
  • Validation de l'Expérience Utilisateur : Les wireframes haute fidélité permettent de tester et de valider l'expérience utilisateur plus précisément. Avec des visuels réalistes, vous pouvez simuler les interactions, les flux et les transitions des utilisateurs, permettant aux utilisateurs de fournir des commentaires significatifs et de découvrir des problèmes potentiels d'utilisabilité avant le développement.
  • Cohérence de la Conception : En incluant plus d'éléments visuels que les wireframes de fidélité moyenne, les wireframes haute fidélité aident à établir une hiérarchie visuelle cohérente et un langage de conception qui peut être reporté sur le produit final.
  • Création de Guide de Style : Les wireframes haute fidélité jouent un rôle crucial dans le développement d'un guide de style pour votre conception. Ils établissent les visuels et les actifs de conception qui seront utilisés jusqu'au lancement du produit.

Mon Processus de Wireframing

J'ai travaillé sur une application mobile pour aider les mères enceintes tout au long de leur grossesse. J'ai commencé par des croquis sur papier, puis je suis passé aux wireframes de fidélité moyenne, et enfin aux wireframes haute fidélité.

Étape 1 – Croquis sur Papier

Pour mes croquis sur papier, j'ai utilisé la méthode Crazy Eights (8s), qui est un moyen très rapide de sortir des idées et des inspirations.

En gros, j'ai sorti mon carnet de dessin, j'ai dessiné 8 cadres de téléphone identiques et j'ai esquissé comment je voulais que mon design ressemble en utilisant un stylo. Les croquis étaient plus élaborés que d'habitude, car je voulais passer directement à la réalisation de wireframes de fidélité moyenne.

Image Croquis Crazy Eights

Étape 2 – Passage aux Wireframes de Fidélité Moyenne

Ensuite, j'ai ouvert un nouveau fichier Figma sur mon ordinateur portable et j'ai transféré mes croquis sur papier vers des maquettes de téléphone sur Figma.

D'abord, j'ai choisi le cadre que je voulais utiliser pour les designs – Iphone 13 pro.

Image Choisissez le téléphone que vous voulez utiliser

Ensuite, j'ai utilisé mes croquis comme guide. C'était surtout une réplication de ce que j'avais déjà sur papier, numériquement.

Ensuite, j'ai utilisé des rectangles pour désigner des images, et du lorem ipsum (texte factice) pour les parties de la conception qui nécessitaient des textes longs.

Image Ajout de rectangles et de texte factice

Avant cela, j'avais créé un guide de style. J'ai donc simplement obtenu les icônes du guide de style.

Image Mes Wireframes de Fidélité Moyenne

Étape 3 – Création de Wireframes Haute Fidélité

C'était la dernière phase de mon wireframing. Ici, j'ai ajouté des couleurs, des images et du texte réel à mes designs.

  1. J'ai commencé par ajouter des couleurs aux écrans de fidélité moyenne.
  2. J'ai également écrit du texte réel pour les écrans, en m'assurant que le texte correspondait à la marque et au but de l'application.
  3. Enfin, j'ai ajouté des illustrations et des images là où c'était nécessaire, aidant les utilisateurs à se rapprocher de la conception.

Image Exemple de wireframing haute fidélité

Dans le wireframing haute fidélité, une fois la structure globale en place, vous pouvez commencer à ajouter plus de détails et à affiner la conception. Cela inclut l'ajout d'éléments visuels tels que des images, des icônes et de la typographie, ainsi que la définition des interactions et des transitions.

Partagez le wireframe haute fidélité avec les parties prenantes, les utilisateurs ou d'autres membres de l'équipe, et recueillez des commentaires. Utilisez ces commentaires pour affiner la conception et apporter les modifications nécessaires.

Une fois le wireframe approuvé et affiné, finalisez-le en ajoutant des annotations, des notes et toute autre documentation nécessaire. Le wireframe doit être suffisamment détaillé pour fournir une compréhension claire de la conception aux développeurs, mais pas si détaillé qu'il entrave le processus de conception.

Image Wireframes Haute Fidélité Complétés

Notez que vous pouvez utiliser n'importe quel type de wireframe que vous souhaitez, en fonction du projet spécifique sur lequel vous travaillez, de l'étape du projet et de vos objectifs. Vous devez également prendre en compte la complexité de la conception, le temps et les ressources disponibles, ainsi que les besoins des parties prenantes et des utilisateurs lors de la détermination du niveau de fidélité approprié pour vos wireframes.

Conclusion

Le wireframing est une étape essentielle du processus de conception qui aide à garantir un résultat réussi. Il permet aux concepteurs de visualiser la mise en page et la fonctionnalité d'une plateforme avant d'investir du temps et des ressources significatifs dans le codage et le développement.

Intégrer le wireframing dans votre processus de conception peut conduire à des designs plus efficaces, plus performants et plus conviviaux.