Comment créer une interface de site trop badass ?

Comment créer une interface de site trop badass ?

Temps de lecture: 
4

Vous voulez développer un site internet qui déchire tout, fourmillez d’idées design « top tendances » mais ne savez pas par quoi commencer ? Doucement ! Élaborer l’ergonomie d’un site et concevoir des interfaces ne s’improvisent pas ! Il y a des étapes à respecter pour que votre site soit efficace et surtout réponde à votre besoin. Vous vous en doutez, un site e-commerce n’aura pas les mêmes objectifs qu’un site vitrine. Alors avant d’avoir la folie des grandeurs, on se pose, on souffle un coup et on commence par le commencement. C’est-à-dire suivre les étapes, bien sagement. Et comme on est sympas, on vous donne même un petit coup de main. Allez, on vous explique ?

Étape 1 : Le zoning, pour poser les bases

Avant tout projet un peu complexe, on commence toujours par faire un schéma grossier pour se représenter les choses de façon globale. Votre site internet ne déroge pas à la règle. Ce schéma, c’est ce que l’on va appeler « zoning ». Ce terme anglais signifie que l’on va positionner les différents blocs ou « zones » de contenu et poser la base des fonctionnalités principales. 

Au cours de cette étape, on organise de façon globale les pages d’un site internet, afin de présenter une première approche au client pour validation. Le zoning a généralement lieu après la conception de l’arborescence du site, mais il peut arriver que les deux étapes se construisent en parallèle.

Étape 2 : Le wireframe, pour développer les fonctionnalités

La suite logique, après le zoning qui débroussaille l’intention du site, est l’étape du « wireframe », qui se traduit par « maquette fil de fer » dans notre bon vieux français. Du contenu réel ou fictif est alors intégré aux blocs définis dans la première étape. Ce contenu, ce peut être des images, du texte ou des vidéos. Le wireframe se focalise sur l’ergonomie, les formes, les contenus et l’organisation des éléments et non sur les aspects graphiques ou esthétiques. La conception de l’interface doit à la fois répondre aux besoins exprimés par le client mais aussi respecter un certain nombre de standards ergonomiques. 

Après leur validation, les wireframes deviennent la base de référence pour la conception graphique. Les designers web doivent alors respecter les fonctionnalités validées par le client. Les wireframes peuvent servir à compléter le cahier des charges fonctionnel, en présentant chaque fonctionnalité et sa spécification.

Étape 3 : Le mock-up, pour simuler le fonctionnement de l’interface

Grâce aux logiciels de conception d’interface, il est possible de rendre le wireframe interactif. Cette étape de transformation en page html dynamique et cliquable se nomme « mock-up ». Avec l’insertion de liens, l’interface devient fonctionnelle. Le client peut désormais se projeter dans le fonctionnement de son site.

Étape 4 : Le prototype pour tester le résultat final

L’ultime étape consiste à prototyper le résultat. Dans la version prototypée, chacune des interfaces est rendue interactive et fonctionnelle, afin de tester les principes de navigation et détecter d’éventuelles erreurs. Le but du prototype est de passer de l’UI (User Interface) à l’UX (User Experience) en testant l’expérience globale de l’utilisateur sur le site internet. Le prototype sert à simuler différents scénarios afin de vérifier que les fonctionnalités répondent bien aux informations fournies, par exemple avec un message de confirmation ou d’erreur adapté à la situation. Le prototypage peut déboucher sur la conception d’une maquette graphique destinée à donner un aperçu fidèle du résultat final. Le moment est arrivé de contempler votre réalisation !

D'AUTRES ARTICLES TROP COOL !

Si votre cœur de métier concerne le marketing ou le digital, vous avez très probablement déjà vécu ce moment gênant où...Lire la suite
Experts du SEO ( Search Engine Optimization ), vous avez sûrement déjà croisé cette curieuse espèce de client. Vous...Lire la suite
Comme vous le savez les artistes sont bohèmes, les médecins sont multimillionnaires, les garagistes sont des escrocs et...Lire la suite

The Must Read List