Les Wireframes – Qu’est-ce que c’est ?

Les wireframe, à proprement appelés « fils de fer » sont des pré maquettes, normalement sans design, qui vont servir à organiser l’information, comprendre les points d’interactions, les chemins de conversion et donc répondre de manière structurée et visuelle aux objectifs du site qui auront été définis en amont.

On pense souvent que les wireframes sont le point de départ d’un site web, mais… comme beaucoup de mythes autour du web design, ce n’est pas vrai!

Les wireframes interviennent après avoir défini pas mal de choses en amont.
Je vous suggère de regarder la vidéo les étapes clés dans la création d’un site web qui répond justement à cela.

En amont de la réalisation des wireframes, on aura défini:

• La stratégie avec:
  • Les objectifs
  • les besoins utilisateurs
  • Le scope avec:
    • les fonctionnalités
    • et le contenu

Ensuite on va s’attaquer à l’articulation à proprement parlé du site web avec la structure, les chemins de conversion selon les objectifs, le wording, les call to action qui vont permettre de naviguer et structurer les différents contenus.

C’est plus ou moins à ce moment que les wireframe interviennent.

A quoi ça sert de faire des wireframes ?

Le but des wireframes est de présenter les objectifs du site, les contenus et les besoins utilisateurs, les chemins de conversion qui vont permettre de remplir les objectifs définis.

Des wireframes ce n’est pas un design !!

Par déformation professionnelle, certains designers vont vouloir faire quelque chose de beau avec des détails, pour faire du zèle et se rassurer !

Mais chers Collègues, votre travail n’est pas de faire quelque chose de beau, c’est faire quelque chose qui répond aux objectifs et aux problématiques que rencontrent vos utilisateurs. Quelle est votre valeur, quel votre Why !? et apportez-vous réellement une solution !?

En parlant du design Steve jobs disait:

« Design is not just what it looks like and feels like. Design is how it works »

Voici réellement l’essence des wireframes !
Une organisation d’éléments, de contenus, d’informations pour créer des chemins de navigation et de conversion pour remplir des objectifs.

Il s’agit de projeter sur du papier ce qui a été vu en amont au niveau stratégique.

Ma recommandation, dans un premier temps, est d’utiliser des POST-IT, du papier, une feuille blanche, cela vous permettra de vous centrer sur les objectifs et non pas de partir dans des digressions graphiques.
L’ordinateur a cette capacité de vouloir en faire plus… et de s’enfermer dans des concepts orientés vers quelque de chose de beau plutôt qu’efficace.

Alors qu’une feuille, un crayon va vous libérer rapidement l’esprit et le post-it est pour moi super intéressant car il a des limitations, il va vous permettre de travailler sur l’essentiel.

Low fidelity / High fidelity ?

peu importe tant que le client comprend!

Je propose une étape à mi-chemin entre les wireframe et des mockup: Je reprends mes sketchs post-it et je détaille les différentes sections.
Cela donne une document rempli d’info mais présenté de manière claire et non perturbant pour le client car on reste dans une réflexion et non une mise en avant d’un branding.

Une respiration bienvenue qui va permettre d’échanger avec votre client afin de souligner les challenges à venir.
Prendre le temps de bien construire la base est important, autant donc prendre ce temps afin de bien structurer les contenus et chemins de conversions.

Voir cette publication sur Instagram

On pense souvent que les wireframes sont le point de départ d’un site web, mais… comme beaucoup de mythes autour du web design, ce n’est pas vrai! Voici quelques conseils pour bien commencer avec les wireframes. Vidéo et article complet dans la bio #designagency #ui #divi #graphisme #design #solvingproblem #ethicalmarketing #webdesign #wordpress #freelance

Une publication partagée par 𝐃𝐠𝐭𝐥.𝐢𝐭 / 𝐖𝐞𝐛-𝐃𝐨.𝐢𝐭 (@gobehindtheprocess) le 28 Janv. 2020 à 2 :33 PST