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 avis

Consultez les autres articles