Le wireframe est un terme utilisé en design graphique. Cela correspond à une maquette fil-de-fer de la future interface à travailler en informatique. Application mobile ou site Web, les wireframes sont des schémas qui permettent de visualiser la structure et les fonctionnalités finales des interfaces.
L’anglicisme wireframe est une traduction littérale des mots “cadre” ou “structure”. On le trouve souvent dans les dictionnaires traduits par les mots “maquette fonctionnelle”.
Ce sont des maquettes qui peuvent être dessinées à la main ou en version numérique et qui représentent des outils indispensables de design graphique pour tout professionnel de l’UX design et de l’expérience utilisateur.
Métaphoriquement, le wireframe est le squelette d’une interface numérique, que ce soit un site Web, un site e-commerce, une application tablette et mobile ou un logiciel.
Ce squelette est alors ultra-simplifié, pour définir dans les grandes lignes le design et les outils qui vont être ajoutés à l’interface plus tard, contrairement au mock up qui va être basé sur l’esthétique et le détail.
Le wireframe peut être considéré comme la première maquette dessinée à main levée d’un architecte avant la création du plan 3D de l’espace. Cet élément graphique est donc essentiel pour comprendre comment va être hiérarchisée l’information, comment va se dérouler le parcours de l’utilisateur sur le site Web, comment va se présenter la version responsive ou encore l’application mobile.
Le wireframe est considéré comme une maquette statique, un prototype qui permet de faire ressortir tous les éléments superficiels d’une interface utilisateurs. On parle de prototype horizontal à la différence du prototype vertical qui correspond au stade du prototypage avancé lorsque les premières fonctionnalités commencent à être implémentées et que les premiers tests utilisateurs peuvent être menés.
Le wireframe s'arrête au moment où le prototype commence à être élaboré. En fait, le wireframe correspond réellement aux premières étapes de la représentation d’un projet digital. C’est une maquette qui est dépourvue de tout élément visuel comme des logos ou charte graphique, qui met en valeur le travail et le projet qui va être accompli par les équipes en interne, et qui permet de gagner du temps ainsi que des ressources avant de se mettre au travail sur la conception de l’interface utilisateur, du front office.
Lorsque l’on parle de wireframe, on parle d’architecture numérique : comme dans tout projet de construction, le dessin et le maquettage sont des éléments cruciaux pour élaborer un projet d’envergure.
Du côté du wireframe, aussi appelé wireframing, cette étape vise à simplifier au maximum le rendu final d’une page ou d’une application, un outil qui permet de travailler efficacement sur un projet sans avoir de notion particulière de dessin.
