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

6 min de lecture
Rédigé par Franck Mairot le 17 avril 2014
Sommaire

Partager sur :

Exemple wireframe Balsamiq

Un logiciel de mockup, pour quoi faire ?

Un logiciel de mockup est un outil bien pratique qu’il faut compter dans sa toolbox au moment de se lancer dans un projet de création de site web. C’est ce type de logiciel qui va vous permettre de concevoir les maquettes fonctionnelles ou wireframes des pages de votre site.

Maquettes fonctionnelles me dites-vous ?? En deux mots, les maquettes fonctionnelles ou wireframes servent à représenter de façon visuelle l’ensemble des éléments qui doivent figurer sur une page (titres, textes, images, boutons, …),  ainsi que leur taille et leur emplacement sur la page.

De l’intérêt du maquettage

Le maquettage fonctionnel est une étape indispensable car elle force à se poser de nombreuses questions pour affiner la structure de votre futur site web, l’organisation interne des pages et leur maillage. Le fruit de votre travail sera ensuite transmis au webdesigner qui s’en servira de base de travail pour réaliser les maquettes graphiques de vos pages.

Fournir des wireframes propres à votre webdesigner simplifiera son travail et lui permettra de se concentrer sur le design graphique où est sensée se trouver sa plus grande valeur ajoutée. Cela vous évitera également quelques mauvaises surprises au moment de découvrir vos premières maquettes graphiques.

Maquette wireframe

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.

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 :

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

A la recherche d’une solution simple / gratuite pour créer un site web ?

Découvrez Wix, le logiciel de référence pour créer un site web facilement.
L’une des meilleures solutions du marché.

 

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.

[reco_popup_1]

Recevez nos actualités chaque semaine

Entrez votre adresse email et recevez chaque semaine les actualitésde La Fabrique du Net, rédigées par nos experts.

En vous inscrivant vous acceptez notre
politique de protection de données personnelles.

Nos autre articles en liens avec Prototypage

Prototypage
8 min
Comprendre la différence entre UX et UI
Par Franck Mairot, avril 2 2019
Prototypage
6 min
Page Paiement – Les bonnes pratiques UX / UI
Par Franck Mairot, septembre 25 2018

Aucun commentaire

Historique

Nos experts mettent à jour nos articles lorsque de nouvelles informations sont disponibles.
  1. 22 janvier 2025
    Modifié par
    Franck Mairot
  2. 17 avril 2014
    Créé par
    Franck Mairot
Voir plus