Outils

15 outils pour réaliser des wireframes de site internet

Les outils de wireframe permettent de créer la maquette du design de votre site internet. Ce procédé est extrêmement utile pour bâtir le squelette de votre futur site et donner de précieuses indications au webdesigner qui devra s’en occuper.

Pour élaborer ces maquettes et bien délimiter chaque zone de vos pages, il existe plusieurs outils wireframe avec différentes fonctionnalités pour vous aider.

Besoin d'un Développeur Webmaster Rédacteur  ?

Déposez gratuitement votre projet sur Codeur.com et recevez rapidement des propositions de devis.

Trouvez un freelance

100 % gratuit

En voici 15 à utiliser sans modération pour créer des wireframes et faciliter les échanges entre vous et votre prestataire pour la refonte de votre site internet par exemple.

wireframe

Outils pour créer des Wireframes en ligne

Mockflow

L’outil Mockflow vous aide à créer des wireframes professionnels pour votre site internet, mais aussi pour vos profils sur les réseaux sociaux ou n’importe quelle autre création. Votre graphiste sera parfaitement quelle direction prendre.

Uxpin

Uxpin vous a déjà été présenté en détail dans un article précédent. Cet outil de qualité se prend en main très facilement et vous permet d’établir votre maquette en quelques clics.

Framebox

L’outil Framebox vous permet de créer votre wireframe dès votre arrivée sur le site. L’interface est ultra épurée et vous n’avez pas besoin de créer de compte. Pratique !

Wireframe.cc

Dans une interface simplifiée, Wireframe vous permet de dessiner sans plus attendre votre maquette. Il intègre différents formats pour vous aider à visualiser ce que votre site peut donner sur tablette et smartphone.

iPlotz

La version gratuite d’iPlotz vous permet de créer jusqu’à 5 wireframes. Vous avez également la possibilité d’ajouter des membres à vos projets pour collaborer à plusieurs sur une même maquette.

Gliffy

Gliffy est un outil en ligne vous aidant à créer divers diagrammes. Vous pouvez également l’utiliser pour dessiner des maquettes de votre projet web.

Pidoco

Utilisé dans 50 pays, Picodo vous propose de mettre votre structure à plat. Si besoin, vous pouvez créer un projet à plusieurs, pour que chacun apporte sa pierre au wireframe.

Moqups

L’outil en ligne Moqups repose sur le principe du glisser/déposer. De plus, il intègre un système de couleur vous aidant à mieux distinguer les zones de votre site. Son interface très simple est également facile à utiliser.

Get Wirefy

Pour utiliser Wirefy, il est nécessaire de maîtriser le langage html et CSS. En effet, cet outil permet de coder directement votre site, pour en faire davantage un prototype qu’une maquette.

QuickFocus

Le SaaS QuickFocus vous aide à créer des maquettes à plusieurs, à les partager et à les télécharger en format PDF ou PNG. L’outil bénéficie d’une offre d’essai gratuite de 30 jours.

Les logiciels de Wireframe

Balsamiq

Balsamiq est un logiciel à télécharger qui permet de collaborer sur une maquette. C’est donc l’outil idéal pour les entrepreneurs qui lancent leur projet avec des associés. Pour l’avoir utilisé pendant quelques temps, il est vraiment complet et simple d’utilisation.

Axure RP

Axure RP est un logiciel compatible Windows et Mac qui permet de construire des maquettes avancées de différents projets : site internet, brochure, application mobile… Il existe une version collaborative idéale pour les petites entreprises ou les personnes faisant appel à des prestataires indépendants.

Photoshop

Au lieu de chercher un outil dédié, vous pouvez très bien utiliser Photoshop. Si vous cherchez des ressources pour créer vos wireframes sur Photoshop, Wireframe kit  et une superbe liste de ressources vous aideront à commencer.

Sketch

J’utilise Sketch tous les jours pour dessiner des features de Codeur.com. Il est un véritable mix entre Photoshop et Illustrator, mais tourné vers le webdesign. Vous pouvez consulter nos ressources Sketch pour trouver de quoi créer des wireframes réalistes. Je vous recommande également l’excellent site de ressources Sketchappsources pour trouver votre bonheur sur Sketch.

Fireworks

Fireworks peut aussi être utilisé pour bâtir des wireframes réalistes. Si vous ne savez pas comment faire, suivez le guide !

Avant de lancer la production de votre site internet, une maquette est indispensable pour construire le tunnel de conversion des internautes, vérifier l’ergonomie et être certain de n’oublier aucune zone importante.

Ces outils vous permettront de créer des wireframes pour visualiser le résultat final et guider le webdesigner que vous aurez sélectionné sur Codeur !

Avez-vous déjà réalisé une wireframe ? Si oui, quel est votre outil préféré ?

 

 

15 outils pour réaliser des wireframes de site internet
4.5 (90 %) 8 votes
2 Commentaires

2 Comments

  1. Marc

    27 mars 2015 à 8 h 52 min

    C’est surement pas le seul qui manque, car la liste est très grande, mais je me permet de mentionner Pencil http://pencil.evolus.vn/
    qui est assez bien fait, multi-plateforme et openSource (par contre, pas encore en mode Saas .. )

  2. Fabien Berthoux

    27 mars 2015 à 9 h 02 min

    Merci Marc 😉

Déposez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

To Top