Ressources utiles pour la réalisation de wireframes

Publié le 7 novembre 2009 par Delphine Dietrich Soyez le premier à commenter »

La réalisation de wireframes nécessite un peu d’inventivité mais aussi et surtout de connaître ce qui existe déjà sur le web. En effet, dans la très grande majorité des cas, concevoir une interface revient à assembler des éléments standards. Il faut sélectionner ceux qui ont fait leurs preuves et qui sont adaptés à vos besoins, où plutôt à ceux des utilisateurs.

La connaissance de ces éléments s’acquièrent au fil de la réalisation de maquettes de sites internet, mais les librairies de patterns, c’est à dire de modèles de conception, peuvent grandement vous aider.

Elles se présentent à peu près toutes de la même façon : une liste de modèles de conception, et pour chaque modèle les informations suivantes : le besoin qu’il satisfait, une description, les avantages et les inconvénient de cette solution, comment et pourquoi l’utiliser, et une galerie d’exemples graphiques (captures d’écran) que l’on peut en général commenter.

Il existe de nombreuses librairies de modèles de conception. Vous pourrez par exemple en trouver une dizaine dans cet article et une 20aine dans celui-là. Je vais vous présenter les trois que je préfère.

1. UI Patterns

UI Patterns présente une cinquantaine de modèles de conception et pour chacun d’eux, de très nombreux exemples. Sa richesse en captures d’écrans la rend également utile pour la partie design du site, qui vient après la réalisation des wireframes.

Ce que j’aime également dans cette librairie c’est la variété et l’originalité des exemples. Par exemple, disons que vous souhaitez aider les internautes à se repérer dans les ramifications du menu de votre site. Vous cliquez sur le pattern « breadcrumbs ». UI Patterns ne vous présente pas trois captures d’écran semblables d’un fil d’ariane classique  tel qu’on peut le voir partout, mais des breadcrumbs un peu différents qui joignent menu et fil d’ariane par exemple, ou avec des visuels. Voici un extrait de la galerie de captures d’écran de la librairie UI Patterns pour ce modèle :
Breadcrumbs sur UI Patterns

Le site vous propose aussi de mettre de côté les patterns qui vous ont plu pour pouvoir les retrouver facilement.

UI Patterns Survey

Intéressant à savoir : UI Patterns fait des statistiques sur la forme, la dénomination et l’emplacement des éléments génériques des interfaces utilisateurs tels que le logo, la création de compte, l’accès au compte, la recherche, le menu ou l’aide. Le résultat de leur enquête permet de connaitre les standards du web, qui sont souvent un bon moyen de construire un site simple et efficace !

2. Quince

Quince est une autre librairie de patterns, également bien documentée.  Ce qu’elle a de spécial ? Le site réalisé avec la technologie Silverlight est vraiment beau et la navigation très agréable. De plus, les moyens d’explorer le catalogue de patterns y sont multiples. Alors que dans la plupart des librairie les patterns sont simplement présentées sous forme de liste arrangée par catégories, Quince propose quatre manières d’explorer le catalogue : par ordre alphabétique, par catégories et sous-catégories, par relation entre les patterns, et par wireframe.

Navigation par wireframe :

Navigation par wireframe sur Quince

3. Ecommr

Ecommr est la librairie à utiliser si vous faites la maquette d’un site e-commerce. Elle présente des modèles d’éléments de sites e-commerce mais aussi des bannières de publicité et des newsletters commerciales. Je trouve que l’idée de regrouper les modèles de conception e-commerce est très bonne, cependant le site n’est pas documenté. On trouve seulement des galeries de captures d’écran. Sympa tout de même.

Un exemple avec les fiches produits :

Fiches produits sur Ecommr

Et vous, si vous utilisiez déjà des librairies de patterns, quelles sont celles que vous préférez ?


Articles liés
Publicité

Les commentaires sont fermés.