Quelques ressources inattendues pour le wireframing

Un tutoriel sur le wireframing sous Illustrator

Moi qui pensait être le seul à faire mes wireframes et mes maquettes sous Illustrator, Adobe me démontre le contraire en sortant carrément une vidéo dédiée sur le sujet.

A l’occasion je ferai probablement un article avec mes propres astuces pour faire des maquettes et des wireframes efficacement sous Illustrator…

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).

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…