15 outils pour réaliser des wireframes de site internet

mockups-wireframes

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. En voici 15 à utiliser sans modération pour créer vos maquettes et faciliter les échanges avec votre prestataire.

 

Besoin d'un développeur ?webmaster ?rédacteur ?

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le prestataire idéal.

Trouver un prestataire

Outils pour créer des Wireframes en ligne

Mockflow

Mockflow outil wireframe

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 saura parfaitement quelle direction prendre.

 

UXpin

UXpin outil wireframe

Construit par des concepteurs UX pour des concepteurs UX, UXpin se prend en main très facilement et vous permet d’établir votre maquette en quelques clics.

 

Framebox

Framebox outil wireframe

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

Wireframe CC

Dans une interface simplifiée, Wireframe.cc 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

iPlotz outil wireframe sites

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 outil wireframe sites

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

Pidoco outil wireframe application

Utilisé dans 50 pays, Pidoco 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

Moqups outil mock up sites

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.

 

Wirefy

Wirefy outil création prototype site

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.

Besoin d'un développeur ?webmaster ?rédacteur ?

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le prestataire idéal.

Trouver un prestataire

 

Les logiciels de Wireframe

Balsamiq

Balsamik logiciel mock up

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. Il est complet et simple d’utilisation.

 

Axure RP9

Axure logiciel mock up

Axure RP9 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.

 

Adobe XD

Adobe XD maquette

Adobe XD est l’outil des designers. Ce logiciel collaboratif permet de créer les designs de sites internet, applications, jeux, etc., pour favoriser l’expérience utilisateur au maximum.

 

Photoshop

WireFrame kit

Si vous n’avez pas la suite Abobe complète ou plutôt que 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

Sketch pour créer wireframe

Véritable mix entre Photoshop et Illustrator, Sketch est un outil idéal pour le webdesign. Il permet de créer des wireframes réalistes. Pour vous aider, vous pouvez consulter notre article référençant des ressources Sketch ou le site Sketchappsources.

 

Fireworks

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érifiez l’ergonomie et soyez certains 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.com.

 

2 Commentaires

  1. 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 .. )

Laissez un commentaire

Votre adresse email ne sera pas publiée. Les champs requis sont indiqués *