Conception de wireframes

Un wireframe est une maquette grandeur nature en vue «fil de fer» qui permet d’avoir une idée sur la manière dont les fonctionnalités prévues par le cahier des charges, c’est-à-dire le périmètre des fonctionnalités, vont se concrétiser. Cette maquette fonctionnelle procède généralement du zoning. Toutefois, j’ai tendance à considérer ce dernier comme faisant partie intégrante du wireframe. Selon les projets, il peut s’agir d’un croquis réalisé à main levé pendant le rendez-vous avec le client ou d’une version plus élaborée, après réflexion.

Exemple de wireframe

Voici un exemple issu de l’article Wireframe basics: now in French! qui présente le travail de traduction de Thomas Poblete (letmecraft) concernant la lecture, l’évaluation et la conception d’un wireframe.

Comment concevoir un wireframe par Carl Duffield, traduit par Thomas Poblete.

Êtes-vous dans les clous ?

La première chose à faire est de s’assurer que votre wireframe correspond bien au brief issus des réunions préparatoires. Dans le cas contraire, n’hésitez pas à effectuer les modifications rapidement au lieu de partir bille en tête sur le design graphique. A cette étape, il est surtout urgent de réfléchir posément sur l’architecture des pages.

Utilisez le bon vocabulaire graphique

Un wireframe devrait être facile à lire. Pour cela, on peut respecter quelques conventions concernant la représentation visuelle des éléments qui composent la page (images, vidéo, liens, boutons, etc.).

Le logo et les éléments de la marque peuvent prendre la forme d’une image (carré barré depuis les diagonales) ou être utilisés tels quels, selon le niveau de détail du fil de fer.

Certains éléments peuvent être colorés mais la mise en couleur — comme le design graphique — est une autre étape du processus de conception.

Soignez le contenu

La page est rythmée par les pavés de textes, les titres et les sous-titres. Leurs tailles et leurs graisses sont généralement proportionnelles à l’importance qu’ils ont par rapport les uns aux autres. On parle aussi de hiérarchie de l’information.

Il est souvent préférable de travailler avec du vrai texte pour avoir une idée précise de leur encombrement : le vocabulaire juridique ou médicale est composé de mots plus longs que dans d’autres domaines. Toutefois, il est tout à fait possible de travailler avec du faux-texte, comme le célèbre Lorem ipsum.

A noter que par convention, les liens sont bleus et soulignés. Mais rien ne vous empêche de les modifier si la charte graphique de votre client le nécessite.

N’oubliez pas

Le wireframe doit être conçu de manière à ce que l’on reste concentré sur l’ensemble du gabarit. L’œil ne doit pas être distrait par des fioritures graphiques. Il est préférable de se focaliser sur les blocs de contenu et les relations qu’ils entretiennent entre eux.

Prenez particulièrement soin de la navigation et des éléments qui permettront aux visiteurs de s’orienter dans l’arborescence de votre site.

N’oubliez pas l’objet de la page qui doit être vu et compris dès le premier coup d’œil. Pour cela, tâchez de le résumer en une phrase maximum.

Pour aller plus loin

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>