fbpx

Comment faire des wireframes

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.

 

 

 

Besoin d'un site web ?

Discutons-en autours d'un café sur Lausanne ou Morges.

#WebDesign #Wordpress #Strategy #DesignSprint

En savoir plus >>

Retrouvez Behind The Process sur Youtube et Instagram

Besoin d’un site web ?

Je guide mes clients vers les bons choix en terme de stratégie, de design et de réalisations web.

Je travail essentiellement avec wordpress, Divi et WooCommmerce et ce depuis de 2013, j’y combine ACF ainsi que la suite d’optimisation de WPMUDEV dont je suis un membre actif depuis plus de deux ans.

Cela me permet de délivrer des projets wordpress performant et sous monitoring en terme de vitesse, d’optimisation d’image et de de sauvegardes sécurisées.

Envoyez-moi un email

A propos de Web-do.it

Hello! Je m'appelle Julien.
Cela fait plus de 15 ans que je conçois des sites web.

En tant que serial entrepreneur, je connais les difficultés des petites entreprises ainsi que leur besoin en terme d'image, de communication et d'outil de visibilité. Je ne suis pas développeur mais je connais les outils web qui font gagner un temps précieux et j'adore transmettre.

Je mets mon expérience à disposition d'un marketing éthique et utile.

  • Web Design
  • Outils WEB
  • SEO & Social
  • Stratégie Digitale

Visitez mes profils:

… ou écrivez-moi julien@dgtl.it