Wireframe et Maquette Ul : quelle différence pour votre projet Drupal ?

Comment les processus de conception UX et UI design permettent-ils à une idée de projet web avec Drupal de prendre vie. D'une part, les UX designers définissent la structure et l'ergonomie via des wireframes, tandis que d'autre part, les UI designers ajoutent des éléments visuels et esthétiques. Ce travail conjoint assure une expérience utilisateur optimale. On vous présente ces méthodes en détail !

La conception UX et UI design d’un projet web

Lors de la conception d’un produit numérique (site, application métier, logiciel…) UX et UI designers travaillent conjointement pour aboutir à des maquettes détaillées du projet qui seront ensuite transmises aux développeurs. C’est l’étape de conception UX et UI design.

La réalisation des wireframes et des maquettes UI correspondent à une phase de production du processus de conception UX et UI design. Celle-ci a vocation à concrétiser un travail préalable et indispensable d’analyse du projet, du besoin et des utilisateurs. C'est tout l'enjeu de l'UX design : comprendre en profondeur les cibles et leurs besoins pour ensuite imaginer et dessiner le produit numérique idéal. Lors de la phase de compréhension, les UX déploient différentes méthodes pour apprendre à connaître le public cible du projet : benchmark, recherche utilisateur, personas, parcours utilisateur, wireframes, test utilisateur...

Les wireframes définissent la structure globale et l’ergonomie des pages

Lors de la conception d’un projet Drupal, les UX designers sont les premiers à intervenir. Après une phase de compréhension et d’analyse approfondie du besoin et des utilisateurs, ils traduisent les éléments obtenus en wireframes.

Les wireframes sont des représentations schématiques et statiques des futures interfaces du site. Elles sont dépourvues de couleurs et de détails visuels. Elles se concentrent uniquement sur la disposition structurelle des éléments sur une page. En d’autres termes, les wireframes sont des esquisses brutes qui servent à définir l'architecture globale de l’interface du site ainsi que son ergonomie. Ils peuvent être réalisés sur papier ou sur un logiciel dédié. En ce qui nous concerne, nous sommes des grands adeptes de Figma.


Voici un exemple sur le projet de refonte du site de l'Opéra National de Bordeaux.

On distingue trois niveaux de wireframes

  • Wireframes basse fidélité : Des croquis rudimentaires qui mettent en avant la disposition générale des éléments en évitant les détails.
  • Wireframes moyenne fidélité : Ils ajoutent un niveau supplémentaire de détail. Les éléments principaux de l'interface commencent à prendre forme, offrant une vision plus concrète tout en évitant encore les détails superflus.
  • Wireframes haute fidélité : Ils se rapprochent du produit final en intégrant des détails visuels, tels que les couleurs, les polices et les éléments graphiques. 

Le niveau de détail apporté dépend des besoins du projet. Notons également qu'il progresse naturellement au fil de l'avancement : l'approche est d'abord approximative, puis se précise peu à peu.

Les maquettes UI reflètent l’aspect final d'un projet Drupal

Une fois les wireframes réalisés et validés, l'UX designer les transmet à son collègue UI designer. Il lui partage également certains points de vigilance. Par exemple, il soulignera les éléments à mettre en avant, ceux sur lesquels l’UI designer pourra prendre plus ou moins de liberté, etc. 

Suite à cette étape de passation, l’UI designer s’attèle à la réalisation de maquettes UI. Contrairement aux wireframes, les maquettes UI représentent une version plus détaillée et esthétique de l'interface utilisateur. Elles ont pour fonction d’habiller les wireframes, de les rendre visuellement attractives (espacements, images…) et alignées sur la charte graphique du propriétaire du site (typographies, couleurs, logo, illustrations, pictogrammes…). Elles vont refléter l'apparence finale du produit.

On distingue trois niveaux de maquettes UI

  • Maquettes UI haute fidélité : Ces maquettes sont les plus proches du produit final. Elles incluent tous les détails visuels et interactifs, permettant aux concepteurs et aux parties prenantes de visualiser l'expérience utilisateur dans son ensemble.
  • Maquettes UI à basse et moyenne fidélité : Bien que moins détaillées que les maquettes à haute fidélité, ces versions offrent une vision plus concrète de l'interface. Elles peuvent être utiles dans les premières étapes du processus de conception pour recueillir des commentaires sans investir trop de temps dans les détails.

Vous souhaitez améliorer l'expérience utilisateur de votre projet Drupal ? L'UX et l'UI design regorgent d'outils et de méthodes pour vous aider !

Nous l'avons vu, les wireframes et les maquettes UI jouent un rôle complémentaire et chronologique dans le processus de conception d'un projet web. Elles permettent de dissocier la structure et la forme, deux étapes indispensables à la réussite d'une expérience utilisateur riche et intuitive.

Contactez-nous pour échanger sur votre projet Drupal. Nos designers sont à votre écoute et se feront un plaisir de vous accompagner !