Quelques ressources inattendues pour le wireframing

Je vous propose une liste de ressources et quelques anecdotes concernant le wireframing.

Un blog dédié au wireframing

Découvert il y a déjà quelques temps, grâce à Frédéric : un blog complètement dédié au wireframing

On y trouve à la fois des exemples, des logiciels, des templates et autres librairies de composants. Comme d’habitude d’ailleurs, beaucoup de modèles existent uniquement pour Omnigraffle. Ce logiciel renommé pour faire des wireframes, entre autres, n’existe malheureusement que sur Mac.

Un outil pour faire des wireframes volontairement « moches »

Les auteurs de ce blog sont visiblement sponsors de Balsamiq Mockups que je connais bien pour avoir travaillé avec chez Dismoioù. C’est un outil original dans la mesure où il se base sur des composants prêts à l’emploi que vous n’avez plus qu’à disposer (boutons, champs de saisie, listes déroulantes, zones de texte, images, onglets…) et qui ont tous l’air d’avoir été dessinés à main levée (et encore en étant un peu atteint de parkinson).

Le genre de wireframe que l’on peut réaliser avec Balsamiq Mockups : ça ne vous rappel rien ?… 😉

Il existe d’autres outils délibérément contraignants qui imposent de n’utiliser que des formes préétablies et dont le rendu est volontairement peu réaliste. Cette démarche qui se généralise est intéressante car elle répond à deux besoins très courants :

  • D’abord le besoin pour les décideurs non-graphistes (responsable marketing, chef de produit…) de pouvoir transmettre leurs idées sans avoir à maîtriser Photoshop ou utiliser des outils peu adaptés comme Powerpoint.
  • Ensuite le besoin pour les designer eux-mêmes de pouvoir travailler sur l’ergonomie et le scénario d’usage d’une ou plusieurs pages d’un site sans que le travail soit parasité par des questions purement graphiques ou esthétiques.

Dans le second cas l’avantage pour le designer est notamment de pouvoir avancer progressivement sur un travail de conception en posant des bases solides petit à petit. Il est souvent périlleux de vouloir faire valider un design en proposant directement une maquette graphiquement aboutie, car rien ne garanti que la composition et le contenu de la page sont bons, or si ces éléments changent il est probable qu’une grande partie du travail soit à refaire…

Du papier et un crayon…

Comme certains outils essayent de vous permettre de réaliser des wireframes qui ont l’air d’avoir été fait à la main, pourquoi pas essayer de les faire directement avec un bon vieux crayon et du papier ?

On aura beau dire, même si vous dessinez très mal et que vous êtes perdu sans une souris, commencer par faire quelques essais à la main est très souvent une bonne idée. Les gens qui sont réticents à cette pratiques argumentent souvent qu’ils trouvent l’inspiration en manipulant leur logiciel favoris (Photoshop of course). Mais comme j’en ai déjà longuement parlé, c’est une fausse bonne idée, voilà pourquoi :

  • un bon design de site web commence par un bon concept
  • un bon concept ne nait pas dans Photoshop, mais dans le cerveau d’un être humain
  • les meilleurs outils pour accoucher d’un bon concept restent (encore aujourd’hui !) un bloc de papier et un crayon

Et oui, le challenge quand on part de rien n’est pas d’avancer le plus vite possible dans un processus créatif, mais d’être sûr d’arriver !

Ebauches papier de quelques sites (très) populaires

Si vous doutez encore de l’intérêt d’utiliser un crayon, allez jeter un coup d’oeil sur cet article de Deeplinking qui montre les premières ébauches de quelques un des sites les plus populaires du Web tels que Flickr, Twiter ou Vimeo !

Comme quoi les meilleurs idées se conçoivent simplement…

Première ébauche de la page d’accueil de Twitter
Publicités

2 réflexions sur “Quelques ressources inattendues pour le wireframing

  1. JP vient de me faire remarquer un n-ième classement des outils de wireframing :
    http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes

    On retrouve bien-sûr Balsamiq, Omnigraffle, Pencil… Mais aussi d’autres outils que je n’ai pas testé et qui ont l’air sympa, comme Cacoo. Un service en ligne qui reprend l’idée de l’aspect « fait main », mais permet aussi des choses assez technique tels que la création de diagrammes UML

    Au passage MockFlow refuse de fonctionner chez moi, il affiche un début d’interface avec un message de chargement qui ne se termine jamais…

    J'aime

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s