https://www.figma.com/team_invite/redeem/7yfxrKAWUu5JxCTKqdhFyd
https://m3.material.io/get-started
Le wireframe est une étape indispensable dans la conception d’un site web ou d’une application. À quoi sert un wireframe ? Quels sont les objectifs de cette étape ?
Le wireframe ou maquette filaire « fil de fer » est un schéma simplifié et détaillé d’une page ou d’un écran. C’est un livrable généralement produit par l’UX designer.
Il est souvent confondu avec le zoning. Ce sont deux étapes différentes mais complémentaires ! Le zoning est une étape préparatoire au wireframe. Il est un niveau de conception macro, il permet de dégrossir les grandes zones de contenu (blocs). Le wireframe est un niveau micro, il permet d’affiner les blocs du zoning en détaillant les éléments.
Traduire les fonctionnalités
Le wireframe a pour vocation de traduire concrètement les spécifications fonctionnelles. Ces spécifications sont la description des fonctions d’un site web ou d’une application. Elles font partie du cahier des charges. Selon les objectifs, un wireframe peut avoir différents niveaux de fidélité. Le niveau de fidélité traduit le degré ressemblance avec le produit final.
Niveaux de fidélité et objectifs du wireframe
Le wireframe basse fidélité
L’objectif est de valider le concept. Le wireframe basse fidélité permet de produire des idées rapidement. Il s’utilise plutôt en début de conception ou pour les user flow. Il peut se faire sur papier pour gagner du temps ou sur un logiciel comme Balsamiq. Sur le plan de la forme, un wireframe basse fidélité utilise des placeholders et du lorem ipsum (faux texte).
Se concentrer sur la structure et le contenu
Le wireframe est une étape importante dans la gestion de projet. Il permet de se focaliser sur l’architecture de l’information et les fonctionnalités d’une interface. C’est un support essentiel qui permet de faire collaborer tous les acteurs d’un projet (client, UX designer, UI designer, développeur etc.).
Wireframe et UX : travailler l’ergonomie
Dépourvu de couleurs, le wireframe permet de se concentrer sur la structure avant de passer à l’aspect graphique à l’étape suivante : les maquettes. Dans un wireframe, on se concentre la lisibilité du contenu en travaillant l’interlignage, la taille du corps de texte et les échelles des titres. On veille à adapter les interfaces en fonction des différents supports : desktop, tablette et mobile.
Le wireframe arrive tôt dans la conception d’une interface, il permet de résoudre de nombreux problèmes liés à l’ergonomie en travaillant par itérations successives (aller-retour).
Wireframe et SEO : intégrer la stratégie de contenu
Le wireframe doit prendre en compte les considérations SEO pour optimiser le référencement naturel. Il doit intégrer la hiérarchie des titres (h1, h2, h3 etc.) et mettre en avant les mots-clés. La ligne de flottaison est une zone stratégique pour placer les contenus SEO et marketing prioritaires (h1, call to action etc.).
En résumé
Le wireframe est un outil qui permet de formaliser et d’explorer des idées. C’est un livrable qui donne une forme visuelle à un cahier des charges textuel. Travailler en nuances de gris permet de se focaliser sur la lisibilité et la hiérarchie.
C’est un support collaboratif qui d’obtenir des retours pour valider les fonctionnalités et le contenu. Les wireframes peuvent avoir différents niveaux de fidélité en fonction de l’objectif choisi : produire des idées ou avoir un aperçu réaliste de l’interface.
Enfin, une fois que tous les aspects fonctionnels sont validés, le wireframe sert de base à l’UI designer pour concevoir une maquette graphique.
1 – Audit
2 – Architecture
3 – Wireframes
4 – UI
5 – Spécifications Fonctionnelles
Transférez plus que les spécifications
Organiser les écrans. Publiez des conceptions verrouillées. Systèmes de conception à l’échelle. Le tout dans un espace de travail convivial pour toute l’équipe, y compris les non-designers.
Code & CI/CD, built for teams using Jira
With best-in-class Jira integration, and built-in CI/CD, Bitbucket Cloud is the native Git tool in Atlassian’s Open DevOps solution. Join millions of developers who choose to build on Bitbucket.
Code et CI/CD, conçus pour les équipes utilisant Jira
Avec la meilleure intégration de Jira et la CI/CD intégrée, Bitbucket Cloud est l’outil Git natif de la solution Open DevOps d’Atlassian. Rejoignez des millions de développeurs qui choisissent de développer sur Bitbucket.
Zeplin
architecture audit wireframe interface spécification
Bring clarity to design intention
Publish finalized designs from Figma, Adobe XD and Sketch.
Define user journeys with Flows and use Annotations to document behaviors, share requirements, cite API endpoints and more!
Flows allows us to quickly identify missing use cases or predict interaction scenarios that we might not have caught before. This helps us create a product experience that’s seamless across touchpoints.
collaboration
Bring together the multidisciplinary team
An accessible workspace that is friendly to non designers such as developers, product managers, copywriters and more.
Zeplin also helps the team collaborate by providing much needed organization and structure to native design files, including screen variants.
Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.
