Le logiciel de mockup, un outil indispensable pour le maquettage de votre site

Réaliser vos wireframes devient un jeu d’enfant

La majorité des logiciels de mockup est très simple d’utilisation et facile à prendre en main. Vous disposez d’un jeu de composants de base à placer, dimensionner et habiller pour composer peu à peu votre page. Les interfaces se veulent épurées et intuitives et proposent parfois du drag and drop pour vous faciliter la tâche.

Ces logiciels peuvent se présenter en version installable ainsi qu’en version SaaS, exécutable en ligne. Bon nombre de ces logiciels sont gratuits ou bien proposent au moins une version d’essai gratuite (souvent en ligne) pour vous faire votre propre idée.

100% gratuit - 3 min

Combien coûte la création d'un site web ?

La Fabrique du Net a développé un moteur d'estimation de prix rapide et efficace.

Je fais une estimation gratuite

Pourquoi utiliser un logiciel de mockup pour mes maquettes ?

Vous pouvez certes réaliser vos maquettes fonctionnelles sur papier ou bien faire un usage détourné d’un logiciel comme power point, mais les logiciels de mockup présentent de nombreux avantages :

• Ils permettent de travailler à l’échelle et d’avoir une véritable représentation visuelle de l’aspect final des pages du site.
• Ils proposent des composants types faciles à personnaliser qui font gagner un temps considérable.
• Ils permettent de dupliquer la structure d’un wireframe pour gagner du temps lorsque deux maquettes sont assez similaires.
• Le rendu des wireframes étant très proche d’un dessin, le logiciel de mockup oblige à se concentrer sur les aspects fonctionnels de la maquette sans perdre de temps sur son graphisme.
• Un wireframe réalisé avec un logiciel de mockup est très simple à faire évoluer.

Du simple wireframe au prototypage de site

Les logiciels de mockup peuvent en fait être plus ou moins riches sur le plan fonctionnel. Certains logiciels de mockup permettent uniquement de réaliser des wireframes très simples, proches du dessin. D’autres proposent une palette de services beaucoup plus étendue, permettant de tout concevoir, de la maquette la plus dépouillée jusqu’à un véritable prototype de site permettant de naviguer d’une page à l’autre !

Personnellement, à La Fabrique du Net, on utilise principalement Balsamiq, un logiciel SaaS de maquettage. La prise en main est rapide et c’est un logiciel idéal pour réaliser des maquettes simples et complètes. Autre plus, la richesse de la documentation sur Balsamiq à destination des utilisateurs.

Trouvez le logiciel de mockup qu’il vous faut

Nos logiciels préférés :

• Balsamiq : Un logiciel simplissime à prendre en main, dont l’élégant rendu crayonné permet de se détacher complètement des considérations esthétiques tout en offrant un certain degré de personnalisation.
• Cacoo : Un logiciel en ligne très performant et particulièrement adapté aux projets de maquettage collaboratifs. Cacco a également été conçu pour faciliter la création de schémas en tous genres.
• Axure : Un logiciel qui couvre tout le spectre du maquettage : des wireframes les plus épurés aux prototypes les plus évolués. Il s’agit d’un des outils les plus complets du marché dont le prix le destine cependant plutôt à des utilisateurs pro.

Petite sélection d’autres logiciels de mockup gratuits ou avec version d’essai gratuite :

• Pencil
• MockFlow
• Justinid
• Pidoco
• PowerMockup
• WireframeCC
• Moqups
• Wirefy
• iPlotz

Une veille plus exhaustive des logiciels de mockup est proposée sur le site de SocialCompare.

Un glossaire des notions en maquettage et prototypage

Le zoning

Lorsqu’on travaille sur le zoning des éléments de contenus d’une page web, on va schématiser grossièrement l’ensemble des éléments de contenus que l’on souhaite voir apparaitre sur la page finale. C’est une étape déterminante puisque l’on va essayer de déterminer la place définitive de certains éléments, comme l’emplacement du logo, ou bien la disposition des blocs (Ex : Le bloc Actualité sur une page d’accueil de blog). Le zoning peut éventuellement faire l’objet d’AB Tests, afin de tester plusieurs disposition et décider laquelle sera la plus adaptée pour le parcours utilisateur.

Le wireframe

C’est l’étape qui vient juste après le zoning. On va déterminer les contenus qui vont apparaître dans les blocs. Cela va permettre de structurer l’interface. A cette étape, on joue davantage sur l’aspect fonctionnel que sur l’aspect design.

La maquette

Une fois les éléments de contenus disposés, il faut penser à les lier. La maquette va intégrer la dimension interactive dans la page web. Les possibilités sont multiples : liaison de pages entre elles pour simuler la navigation sur le site, insertion de liens externes, caroussels d’image pour se représenter les animations de la page, etc. On intègre petit à petit le design. Lors de cette étape, on va se rendre compte des potentielles incohérences du parcours utilisateur.

Le prototype

Le prototype vise à tester différentes solutions ou technologies permettant la réalisation finale du site web. On va parler de prototype jetable lorsqu’on teste un certain nombre de technologies différentes, ou bien de prototype évolutif lorsqu’il constitue le début de l’application finale.