Les maquettes fonctionnelles
Les maquettes fonctionnelles, également appelées “mockups” ou “wireframes”, représentent de manière schématique (en “fil de fer”) la structure d’une page web, les différentes zones de contenu prévues, ainsi que l’emplacement des différentes fonctionnalités.
C’est le travail de l’architecte de contenu et de l’ergonome, avant que n’interviennent les graphistes, les rédacteurs et les développeurs.
Les maquettes fonctionnelles représentent les plans de la maison. Avant de couler le ciment (développement HTML), de choisir les peintures (feuilles de style CSS) et de placer le mobilier (intégration des contenus), il est important de savoir où on va.
Ci-dessous, la réalisation d’une maquette à l’aide de l’application MockFlow.
Réalisation d’une maquette fonctionnelle avec un outil gratuit en ligne
Source : Mockflow
Certains logiciels, comme Mockflow, Protoshare ou Axure, permettent de créer aisément vos maquettes, par simple glisser-déposer au départ de toute une bibliothèque d’éléments d’interface :
- Barres de menu
- Fil d’Ariane
- Bannières
- Vidéos, carrousels, cartes Google Maps, etc.
- Zones de titres et de texte
- Zones de commentaires
- Formulaires
- Flux RSS
- Boutons “Imprimer”, “Facebook”, “Twitter”, etc.
Notez que le choix du CMS influence les possibilités fonctionnelles. Les CMS de dernière génération facilitent grandement la création d’interfaces au départ de centaines de modèles (templates) personnalisables. Un simple mouvement de glissé suffit à inclure un nouveau module, disponible dans l’instant sur toutes les pages du site.
Pour aller plus loin :