Le maquettage d’un site est une étape incontournable de l’approche de conception. Elle permet de visualiser dans des conditions les plus proches de la réalité les pages-clés de votre futur site.
Effets de scrolling, placement des boutons d’actions, enchaînements des pages, aspects fonctionnels, rien ne vous échappera. Leurs bienfaits sont multiples et ils ont une capacité immersive évidente en phase de conception.
Il en existe de nombreux aujourd’hui. Ne dites plus que vous n’en savez rien, ce billet vous en dresse une première liste, histoire de vous prendre pour un maître ergonome
Les Mockups et wireframes
Ces deux termes désignent l’ensemble des techniques et des outils qui permettent de maquetter un site web sous les angles graphiques, fonctionnels et ergonomiques,à l’image des story-boards utilisés dans l’audiovisuel.
Alors que mockup sert plutôt à designer des écrans mais ne gère pas la notion de liens et d’interactivité entre les écrans, le wireframe intègre cette dimension d’interactivité au sein du prototype et permet d’aboutir à des simulations puissantes, souvent exportables et lisibles à partir d’un navigateur web (simulation de connexion d’un utilisateur à un site web, intégration et lien avec des données stockées en base ou dans des fichiers…)
Pour quels usages ?
Quel que soit votre métier, ils vous permettent de simuler un comportement dans des présentations client, lors de comités projets ou vous offrent un moyen de maquetter un site prototype à moindres frais.
La liste des usages peut aller encore bien plus loin et supporter des discours fonctionnels élaborés avec mises en situation.
Bref, leurs utilisations sont vastes et leur implémentation ira croissante en fonction de vos attentes. Cela dit, ils sont rapides à mettre en œuvre et sur ce point, ils remplissent leur fonction première : donner à voir avant de sauter dans le grand bain !
Quels sont les outils phares du marché ?
Rien de neuf me direz-vous. L’intérêt est que vos prototypes seront largement diffusés et c’est une des vertus du prototypage : sa viralité par appropriation des équipes. Cependant, il avoue rapidement ses limites lorsque l’on bascule dans des fonctionnalités plus web (menus déroulants par exemple). Mais qui a prétendu que Microsoft était web friendly ?
Cette simplicité peut également être un désavantage lorsque l’on veut exposer des choses qui sortent du basique, je pense par exemple à des menus déroulants. Ceci dit on y arrive très bien en bricolant un peu et de grandes sociétés multimédia se servent de cet outil pour prototyper des applications.
Cette application open-source existe aussi sous forme d’extension Firefox. Très simple d’utilisation, elle vous permettra des schématiser facilement des écrans. Cependant, elle ne gère pas les hypermédias, ce qui vous limitera si vous souhaitez une maquette interactive. Cete application est gratuite et bien adaptée pour des sorties print.
Pour télécharger l’extension, c’est par ici.
C’est le logiciel de Microsoft pour le wireframe. Il offre évidemment beaucoup plus de souplesse que Powerpoint et de fonctionnalités plus étendues.
N’étant pas moi-même un grand fan de windows, je ne sais que vous dire. N’hésitez pas à me faire partager vos retours.
Pour le tester, c’est par ici.
C’est l’équivalent de Visio pour les mac users et l’un de mes préférés pour ses capacités, sa simplicité de prise en main et sa très bonne intégration sur la plate-forme macOS.
Conformément aux produits Mac, son rendu est très bon et le design sera très réussi. Je vous le recommande fortement. L’éditeur propose par ailleurs de nombreux autres outils, notamment un très bon éditeur de graphiques de Gantt pour les chefs de projets que nous sommes
Pour le test, c’est par ici.
Ce logiciel génère des écrans style « dessins fait à la main». I semble très accessible, ce qui est un avantage évident pour s’approprier l’outil.
Cependant, vérifiez l’étendue de ses fonctionnalités, le très simple étant souvent l’ennemi du très complet.
Ce logiciel est dédié au wireframe.
Il est très complet : gestion des interactions et génération des spécifications de l’application au fur et à mesure que vous la designez. Payant (549 $)
Pour le tester, c’est par ici.
Cet outil est accessible en ligne. Il génère des diagrammes, flowcharts et autres mockups. Assez complet donc.
Vous pourrez accéder à une version standard gratuitement. Pour les options “premium”, il vous faudra sortir votre carte bancaire
Le site de Gliffy
Le meilleur pour la fin : incontestablement, c’est LE logicel de prototypage. Il bénéficie de nombreux atouts qui en feront votre outil favori, vous aussi : très simple d’usage, mise en ligne aisée, options bien ordonnées et un niveau de fonctionnalités très satisfaisant pour les mises en formes (gestion des CSS). Avec les versions, cet outil ne cesse de s’améliorer. Réservé aux Mac users
Pour le visualiser, c’est par ici.
Bon courage !
Jeu de briques
Snake
Pacman
Bubble