5 magnifiques outils pour créer des wireframes

Ergonomie, PrestaShop, WordPress
  • Accueil
  • Blog
  • 5 magnifiques outils pour créer des wireframes

Lorsque vous déployez un projet web sous PrestaShop ou WordPress, le mieux c’est de réfléchir en amont à votre objectif (vente, communication…) et de construire votre site de telle sorte qu’il convertisse un max ! Pour cela on va se pencher sur le wireframe.

Le wireframe : utile au projet web PrestaShop ou WordPress

Kézako le wireframe ? Pour faire simple, c’est une maquette qui précède toutes les autres et qui se veut être minimaliste d’où le nom « maquette fil de fer« . On va se pencher à cette étape du projet web qu’il soit e-commerce ou non sur l’objectif à atteindre. C’est très important puisque les éléments vont être disposés sur la maquette fil de fer de façon à obtenir le meilleur taux de conversion.

wireframe-ecommerce-prestashop
Exemple de wireframe pour un projet e-commerce sous PrestaShop

L’idée du wireframe est donc de poser la base de la structure du site en apportant des explications techniques / pratiques pour la suite, pour ne pas se lancer directement dans du web design pur et dur.
Cette étape d’optimisation ergonomique peut notamment éviter les retours de client du type « hum…ça je ne le voyais pas à cet endroit en fait… » Une phrase anecdotique en apparence mais qui peut vite énerver lorsqu’il s’agit de bouger tout le PSD – ça sent le vécu 😉

5 outils pour concevoir de très beaux wireframes

Sans plus attendre, voici une liste non exhaustive d’outils web ou à installer en local forts utiles lorsqu’il s’agit de faire un wireframe, car sur Word c’est aussi possible mais laissez votre crédibilité de côté ^^
1. Wireframe.cc
En fait, c’est un peu mon coup de coeur même si je ne l’utilise pas encore ! Plus simple, pas possible. Utilisation en drag & drop et partage via une url pour vos wireframes.
wireframe.cc
[button link= »http://wireframe.cc/ » style= »tick » text= »dark » window= »yes »]Essayer Wireframe.cc[/button]
[hr]
2. Mocknow
Simple d’utilisation et lui aussi en ligne, il sera votre compagnon idéal dans la réalisation rapide de vos wireframes.
mocknow
[button link= »http://mocknow.com/ » style= »tick » text= »dark » window= »yes »]Essayer Mocknow[/button]
[hr]
3. Moqups
Conçu en HTML5, cet outil on-line est plutôt complet avec notamment l’usage de la couleur pour faciliter la lecture de vos maquettes fil de fer.
moqups
[button link= »https://moqups.com/ » style= »tick » text= »dark » window= »yes »]Essayer Moqups[/button]
[hr]
4. Wirefry
Wirefry est un outil à installer qui permet de construire des wireframes puissants et notamment en responsive design. Pro et efficace.
wirefry
[button link= »http://getwirefy.com/ » style= »tick » text= »dark » window= »yes »]Essayer Wirefry[/button]
[hr]
5. Balsamiq Mockups
Je l’utilise depuis le début car performant et complet. Le seul bémol est son utilisation en local.
balsamiq.mockups
[button link= »http://www.balsamiq.com/products/mockups » style= »tick » text= »dark » window= »yes »]Essayer Balsamiq Mockups[/button]
[hr]

Et vous ?

On vient de voir qu’il existe un bon nombre d’outils pour faire des wireframes : quel est le meilleur selon vous ? et pourquoi ? En avez-vous un autre sous la main à recommander ?

One thought on “5 magnifiques outils pour créer des wireframes

  1. Boooonsoir les gens,
    Si vous souhaitez ajouter un super outil de plus à cette liste c’est maintenant ou jamais, alors n’hésitez pas les copains. Creately https://creately.com/ est un super logiciel pour création de wireframes puisqu’uil propose une multitude de modèles gratuits et vous permet de gagner du temps avec son interface que vous guide pas à pas vers la fin de votre projet. Essayez-le!
    Merci

Laisser un commentaire

Consultez les autres articles