Accéder au contenu principal

L'Art du Wireframe

©Mario Andrade -
http://muiomuio.com/web-design/website-wireframes
Quand on envisage de lancer un nouveau logiciel, un site web ou de revamper une interface, il est une étape incontournable du projet informatique qui s'appelle, en bon français, le “wireframe”. Je ne sais pas s'il existe une traduction de ce terme dans la langue de Mikael Vendetta, mais personnellement, j'opte pour celui de “maquette en blanc”.

L'étape du wireframe est essentielle, pour ne pas dire cruciale : elle intervient juste après la définition du cahier des charges et les premières esquisses sur le paperboard.
Car ce type de projet implique des équipes multiples et hétérogènes : les développeurs qui vont concevoir le code, les graphistes qui vont dessiner l'interface, les ergonomes qui vont éplucher les enchaînements et les positionnement de bouton, en dehors de toute considération esthétique. Sans oublier les fameux “monkey testers”, néophytes qui vont être chargés de soumettre votre interface à rude épreuve pour valider que même le plus sot de vos utilisateurs pourra l'utilisateur.
Pour la réussite de votre projet, il vaut mieux que ces différentes populations travaillent en parallèle, plutôt qu'en mode séquentiel : ça vous évitera d'exploser vos délais.

Le wireframe va donc consister à tracer les grandes lignes de chaque écran de votre interface, sans considération esthétique. Il s'agit juste de se dire : on positionne le logo ici, les boutons là, le texte à cet endroit, les ascenseurs ici, et quand je clique là, il se passe ça.
Le wireframe présente plusieurs avantages :

  • il matérialise pour la première fois votre projet : on commence à entr'apercevoir à quoi ça devrait ressembler…
  • il confronte votre projet à la réalité : jusque-là, tout était dans les esprits. Chacun se faisait sa propre idée, et c'était sûr, ça allait être génial. En s'efforçant de dessiner un wireframe, on se rend compte souvent des incohérences, des impossibilités ou des incompréhensions. Tant qu'à faire, il vaut mieux que cette prise de conscience se déroule au début d'un projet… qu'à la fin.
  • il définit la feuille de route : dès lors que le wireframe est tracé, il devient plus facile d'estimer le travail de chacun, et d'assigner les tâches.
  • il constitue un référentiel : pour éviter que le projet ne dérive en cours de route, il constitue le référentiel commun qui saura, le moment venu, jouer le juge de paix.
Quel(s) outil(s) pour concevoir un bon Wireframe ?
Vous vous en doutez, il n'existe pas de réponse “absolue”.
Pour ma part, je distingue les chefs de projets qui ont un peu la fibre graphique des autres.
Pourquoi ? Le chef de projet qui a la fibre graphique aura nécessairement le réflexe de se tourner vers Photoshop et Illustrator pour construire son wireframe. D'une part, ce sont des outils extrêmement puissants pour créer rapidement ce type de documents, et d'autre part, il existe beaucoup de ressources “clés en mains” pour ces deux logiciels : boutons, menus, éléments graphiques… Quelqu'un qui maîtrise Photoshop ou Illustrator pourra ainsi créer très rapidement un wireframe.
Mais attention : le danger, c'est qu'on peut être vite tenté de tester une couleur, un effet graphique, une typo… et là, c'est fini. On bascule dans le design de l'IHM, et toute l'essence du wireframe est perdue à mon sens.

C'est pour cela que, personnellement, je recommande d'autres outils, un peu plus “bruts”, mais qui présentent l'avantage d'aller à l'essentiel, et d'éviter de se perdre dans ces aspects graphiques.
Bien sûr, on peut être tenté de dessiner son interface sous PowerPoint ou Keynote, mais je ne crois pas que ces outils soient adaptés. Je vous recommande plutôt :
  • yWorks, une application Java gratuite, absolument géniale
  • OmniGraffle sous Mac, un logiciel pour créer tous vos dessins techniques : il est performant, convivial et il dispose d'une multitude de bibliothèques de symboles. Un must !
  • sur iPad, iMockup
  • Visio, sous PC
  • Et pour ceux qui produisent beaucoup de wireframes : Axure
Sinon, sachez qu'il existe sur le web tout un tas de services gratuits et souvent collaboratifs qui vous permettent de dessiner votre wireframe sans quitter votre navigateur :
  • Lovely Charts : de loin, mon préféré. Simple, sexy et tellement ludique !!!!
  • iPlotz : un service payant, qui offre une version de découverte gratuite, idéale pour les petits projets
  • Pencil Project : un plugin de Firefox qui permet de dessiner des interfaces depuis la fenêtre de son navigateur 
  • Google Drawings : l'outil de dessin de Google. Surtout si vous utilisez les bibliothèques de symboles appropriées.

Voici quelques liens qui pourront vous être utiles :

Commentaires

  1. Au tout début de mon projet j'utilisais Keynote, mais le gros problème c'est que le document reste dans une fenêtre et pour faire un site avec scroll, c'est plutôt embêtant. Cela avait quand même un avantage : se forcer à placer les éléments de manière optimisée pour ne pas avoir à scroller. Mission impossible parfois.

    Du coup je suis plutôt vite passé sur Omnigraffle, mentionné dans l'article. Vraiment une pépite ce logiciel !

    En plus dans leurs ressources on peut télécharger des packs tout fait avec des modèles de la charte iPhone, les formats de pubs classiques, boutons de réseaux sociaux, etc.

    Avec lui la tentation est grande de faire quelque chose de coloré ! :D

    RépondreSupprimer
  2. Super interessant, merci pour ces ressources.

    RépondreSupprimer
  3. Personnellement j'utilise Omnigraffle et lorsque je souhaite créer un prototype animé : http://www.flairbuilder.com/

    RépondreSupprimer
  4. Belle liste, j'ajouterais
    http://balsamiq.com
    et
    https://gomockingbird.com/

    RépondreSupprimer
  5. Excellent, je ne les connaissais pas !
    Merci

    RépondreSupprimer

Enregistrer un commentaire

Chers lecteurs, n'hésitez pas à laisser un commentaire sur cet article !

Posts les plus consultés de ce blog

Importer les données d'un tableau Excel dans Indesign [actualisé]

Une question qui revient souvent sur les ondes concerne l'automatisation de l'import de tableaux Excel dans Indesign. C'est un aspect très utile dans la vie d'un graphiste, et globalement mal appréhendé par la plupart d'entre eux. Il faut reconnaître qu'Excel n'est pas l'outil naturel du graphiste, c'est même plutôt un sujet de détestation et de moquerie.
Or force est de constater qu'Excel est utilisé par un grand nombre de clients pour travailler leurs données produits et leurs grilles de prix.
En d'autres termes, Excel est au marketeurs ce que Photoshop et Indesign sont aux graphistes : leur compagnon quotidien.

Lorsqu'un client vous soumet des données Excel à mettre en forme, deux options s'offrent donc à vous pour monter votre mise en page :
copier / coller les contenus et faire une mise en page “en dur”… méthode la plus courante mais qui comporte de nombreux inconvénients : perte de temps, répétition de tâches fastidieuses, aucu…

Gratuit : l'étude de marché du web-to-print en Europe 2020

Aujourd'hui, c'est Noël, et j'ai décidé de vous offrir mon étude de marché sur l'imprimerie en ligne en Europe en 2020. C'est un travail personnel, réalisé avec mes propres moyens, en compilant les données disponibles publiquement sur le web… L'objectif de cette étude de marché est disposer d'une vision du poids de l'imprimerie en ligne en Europe, de voir quelles sont les technologies utilisées et de zoomer dans chaque pays pour étudier quelles sont les dynamiques propres à chaque territoire.

Cette étude est forcément fausse, je vous préviens :-) En se basant sur des données publiques, il manque forcément des chiffres, mais je pense qu'à un niveau macro, les tendances sont plutôt justes. J'espère en tout cas qu'elle vous aidera à mieux comprendre ce qui se passe dans le web-to-print en Europe, et dans votre pays, et qu'elle vous donnera envie, peut-être, de franchir le pas.

N'hésitez surtout pas à me faire part de vos remarques, cri…

Le "100% Revendeurs" dans l'imprimerie en ligne, un modèle qui a de l'avenir !

Alors que de plus en plus de clients finaux achètent en direct leurs imprimés en ligne, beaucoup s'interrogent sur l'avenir du modèle 100% revendeurs, voire même sur la pérennité du revendeur lui-même. Est-il voué tel un dinosaure à disparaître, emporté par un tsunami digital ? Ou serait-il en train de renaître, tel un Phénix ? Eléments de réponse avec l'exemple français de Realisaprint.com 10 ans d'existence, 10 millions d'Euros de CA, 100% revendeurs Depuis sa création en 2009, le site Realisaprint.com propose des produits d'impression exclusivement réservés aux revendeurs, sur le modèle du “closed portal” – en français, un site web dont l'accès et surtout les prix sont fermés aux non-revendeurs. S'il était répandu jusqu'en 2014-2015, ce modèle de distribution s'est étiolé sur le web, laissant progressivement la place à de simples programmes de remises commerciales sur des prix publics. Ce principe de grilles de remises constitue aujourd'…