Posez votre question »

Créer la maquette de son site web pro : les bons outils

Juillet 2015

Une fois réalisés le cahier des charges et l'arborescence de son site web, commence la phase de maquettage, aussi appelée « wireframing ». Une étape indispensable pour se faire une idée plus précise de l'ergonomie du site. De nombreux outils de wireframing gratuits ou payants sont aujourd'hui disponibles pour réaliser cette tâche. Simples d'utilisation, ils sont particulièrement utiles aux professionnels encadrant la réalisation d'un projet web. Présentation.


Le wireframing ou maquettage de sites web : qu'est-ce que c'est ?


Le « wireframing » (maquettage) est l'étape consistant à représenter schématiquement l'organisation d'un site web (ex : arborescence), ainsi que son interface graphique (interactivité et ergonomie).
Cette étape de schématisation intervient après la réalisation d'un cahier des charges, et avant la phase de conception web proprement dite. Elle peut être réalisée par différentes personnes prenant part au projet (voir ci-dessous). Elle permet entre autres de tester l'ergonomie du site, d'évaluer le temps nécessaire à la réalisation du projet, et d'estimer les coûts de réalisation associés.

Outils et logiciels de maquettage ou de wireframing


Les outils de maquettage se destinent à l'ensemble des professionnels réunis autour d'un projet de conception web, qu'ils soient ou non techniciens. Ils ont vocation à faciliter en amont la réalisation des étapes de conception d'un site/blog/d'une application web/mobile, et à assurer une bonne compréhension entre les différents acteurs (client, chef de projet web, webdesigner et développeur, etc.)

Ils sont dotés de différentes fonctionnalités (ex : glisser-déposer), qui permettent de disposer facilement les éléments graphiques d'un site sur différentes pages, travailler la dimension de ceux-ci, définir l'emplacement des menus, etc.

Pour quels professionnels ?


Les outils de wireframing peuvent être utilisés par différents types de professionnels, et dans de nombreux cas :
  • Chefs de projets web : qui en amont de la création d'un site web/blog/site d'e-commerce, souhaitent présenter à leur client une ébauche du projet conforme au cahier des charges de ce dernier : arborescence et nombre de pages, disposition des menus, plugins, ergonomie, etc. Les outils de wireframing facilitent également la communication avec les web designers dans la phase de conception du projet.
  • Les professionnels de la communication et du marketing : qui en interne et sans recourir à une agence web spécialisée, entreprennent un projet de création de site web/blog professionnel, et ont besoin de représenter schématiquement celui-ci.
  • Utilisation hors web : présentation de diagrammes ou de schémas (ex : arbres à idées)

Quelques outils de création de maquettes gratuits

Pencil Project


Cette extension Open Source pour le navigateur Firefox (4 et version supérieure) permet de concevoir des diagrammes et de réaliser des interfaces utilisateurs, à l'aide d'une grande palette d'outils. Elle propose de nombreux éléments graphiques (stencils) pour construire le schéma des pages, et permet également :

- la création de pages multiples
- la création de liens entre les pages
- L'édition de texte directement sur la maquette
- L'export aux formats HTML, PNG, OpenOffice.org, Word et PDF
- Opérations standard : alignement, rotation, redimensionnement
Le site officiel de l'application

Lumzy


Cet outil collaboratif de création de maquettes en ligne (prototypage de site web) propose une cinquantaine d'éléments graphiques (boutons, listes, fenêtres de texte, barres de défilement, figures géométriques etc), à disposer sur un espace de travail en glisser-déposer. Il supporte bien sûr la création de pages multiples (onglets séparés).

Une fenêtre proposant des outils de mise en forme est associée à chaque élément graphique glissé-déposé (alignement, couleurs...) et facilite la personnalisation du projet.

Le créateur du projet peut inviter des tiers à y participer pour collaborer en temps réel.

Lumzy intègre par ailleurs un outil de retouche d'images, une messagerie instantanée, et de nombreux boutons d'actions standard (duplication d'items, superposition, blocage des icônes déposés)
Essayer Lumzy

MockFlow


En version gratuite, cet outil de wireframing en ligne n'est ouvert que pour des projets de 4 pages , avec 2 collaborateurs maximum. Une configuration suffisante pour la création de très petits sites (vitrine).

Il met à disposition de très nombreux éléments à insérer dans la maquette pour schématiser de nombreux projets : application web, formulaire de contact, logiciel, etc.
Essayer MockFlow

Cacoo


Cet outil de création de diagrammes en ligne polyvalent fournit de nombreux éléments à insérer, et fonctionnalités, pour créer simplement des plans de sites (sitemaps). Il permet également à plusieurs utilisateurs de travailler ensemble et simultanément sur un même projet.
Essayer Cacoo

Quelques outils de création de maquettes payants/premium

Balsamiq


Cet outil collaboratif (client desktop pour Windows, Apple et Linux) permet de réaliser des prototypes d'applications ou de sites web. Son interface propose 75 commandes/actions intégrées. Balsamiq propose également 187 icônes insérables, ce qui en fait l'un des outils de wireframing les plus complets. Il est proposé à 79$.
Essayer Balsamiq

Mockingbird


Cet outil de création et de partage de mockups en ligne et très intuitif est disponible à partir de 9$/mois (deux projets, collaborateurs illimités).

Lire le retour d'expérience utilisateur de cet outil, dans notre rubrique interviews.

iPlotz


En local (téléchargement sur OS Linux, Windows, licence de 75$) ou en ligne (payant au-delà d'un projet de 5 pages), iPlotz permet de modéliser et structurer efficacement les interfaces de sites applications web. Il s'adresse plutôt aux utilisateurs experts, même s'il est simple d'utilisation.
Essayer iPlotz

Pour une lecture illimitée hors ligne, vous avez la possibilité de télécharger gratuitement cet article au format PDF :
Creer-la-maquette-de-son-site-web-pro-les-bons-outils.pdf

Réalisé sous la direction de , fondateur de CommentCaMarche.net.

A voir également

Dans la même catégorie

Herramientas para crear bocetos de sitios web
Par Carlos-vialfa le 12 janvier 2012
Publié par CommentCaMarche.
Ce document intitulé «  Créer la maquette de son site web pro : les bons outils  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.