Tracez les wireframes pour le site responsive

Dessinez la maquette du projet en basse fidélité graphique

En design, on l'utilise pour désigner les éléments principaux de l'interface (desktop ou mobile) des pages d'un produit web et montrer leur répartition entre elles.On peut les dessiner à la main ou via un logiciel, tel Axure ; mais rien n'empêche de le créer avec un outil plus simple comme PowerPoint par exemple.

Moi je préfère le faire à la main, c'est vraiment plus rapide, et à ce stade du projet, ce n'est pas le pixel qui compte !

Tracez les contours externes du wireframes une seule fois

Si vous dessinez à la main, ne vous embêtez pas à refaire les contours à chaque fois.

Dessinez une fois pour toutes sur une feuille A4 les contours de la maquette au format désiré (web ou mobile), et puis photocopiez en autant de pages que nécessaire ! Ensuite, il ne vous restera qu'à dessiner à l'intérieur.

Vous n'êtes pas obligés - si c'est la première version de maquette du projet - de représenter tous les éléments d'interface précisément.

Par exemple pour montrer dans un "wireframe" qu'il y a un bloc de texte quelque part, vous pouvez simplement dessiner un carré (pour montrer qu'il s'agit d'un bloc de contenu), voire tracer des lignes, pour que l'on comprenne que c'est du texte. Et, pour une image, en général, on barre le carré d'une croix. 

Faites le wireframe mobile en premier

La plupart du temps, un site est consulté depuis un terminal mobile, et dans la très très grande majorité des cas avec un smartphone.  

Vous devez donc particulièrement soigner la partie mobile et vous en occupez avant toute chose.

C'est votre priorité, prenez en soin.

Cela permet de répondre encore mieux aux besoins des utilisateurs, en faisant correspondre un produit avec leurs usages. Et puis, cela facilite le développement ensuite, car cela aura déjà été pensé en amont. 

Utilisez des nuances de gris

Il y a la tentation, une fois le "wireframe" (ou maquette basse fidélité) terminé, de rajouter de la couleur pour faire ressortir les éléments importants comme un bouton d'appel à l'action par exemple…

Ce n'est pas forcément une bonne idée. 😐

1. Vous allez perdre du temps pour quelque chose qui n'a pas tant d'importance que cela à ce stade.

2. Le résultat n'est pas toujours très heureux quand on y va au petit bonheur la chance avec la couleur… 😱

Dans ce cas-là ce que vous pouvez faire c'est utiliser des nuances de gris pour apporter du contraste et faire ressortir les zones qui ont de l'importance.