Conseils pour réaliser vos maquettes d’interfaces sur papier

Pour être efficace en début de projet, rien ne vaut le papier et le crayon. L’article Paper first ! Les bonnes raisons pour démarrer les projets par des wireframes sur papier aborde le fond.

Pour ce qui est de la forme, voici quelques conseils pour réaliser de belles maquettes d’interfaces sur papier.

D’un point de vue visuel et pédagogique :

  • A delà du simple papier et crayon, utilisez un feutre noir à pointe fine, soit directement, soit pour repasser à main levée sur certains éléments tracés au crayon de bois. En repassant en noir, vous mettez en avant des éléments importants de l’interface (un titre par exemple, comme si vous l’aviez mis en gras). Il est possible de se passer de feutre noir et de jouer sur la force avec laquelle vous dessinez les éléments au crayon (nuances de gris) .
  • Pensez également aux crayons feutres de couleurs à pointes fines. Comme pour le feutre noir, vous pouvez mettre en valeur des éléments de l’interface. Vous pouvez aussi matérialiser les actions de l’utilisateur (action sur un bouton, scroll…) par des indications de couleur (rouge par exemple).

D’un point de vue pratique :

  • Utilisez de préférence un criterium avec une mine de 0,5.
    Vos croquis auront des traits plus fins et plus précis. De plus, cctte taille de mine permet de passer parfaitement dans l’ensemble des formes et icônes du pochoir à wireframes Stencileo.
    Un 0,7 fera également l’affaire mais la mine sera un peu grosse pour deux ou trois formes comme l’icône du caddy par exemple. Enfin, un simple crayon de bois peut aussi convenir dès lors qu’il est bien taillé.
  • Remplissez au crayon les formes du pochoir (les icônes).
    Pour la plupart des pictos, c’est plus simple que d’en faire le contour. Cela va plus vite et le rendu est plus sympa.
  • Tracez le contour des grandes formes.
    A l’inverse des pictos, les grandes formes sont faites pour tracer les contours, telles que les zones de saisie.
  • N’hésitez pas à vous servir des côtés du pochoir comme d’une règle.
    Vous pouvez ainsi dessiner des formes plus grandes ou bien contrôler des alignements.
  • Placez des repères.
    Avant de démarrer votre maquette, tracez quelques repères au crayon (sans appuyer de manière à ce que ce soit très discret) comme vous le feriez avec des lignes de repères dans Photoshop. Utiliser nos gabarits à imprimer permet aussi de faciliter l’alignement des éléments et de gagner du temps.
1
2
3
4
5
6
1

Ici une action de scroll indiquée par cette flèche de couleur rouge (permet de passer de la maquette 1 à la maquette 2)

2

Ici le point rouge indique une action effectuée sur le bouton (permet de passer de la maquette 2 à la maquette 3)

3

Utiliser un feutre noir, ou jouer sur l’intensité du crayonnage, permet de mettre en avant des éléments importants de l’interface (logo, action importante comme le caddy ici). Cela peut être donc des indications pour l’étape suivante de maquettage graphique (Photoshop).

4

Utiliser des feutres de couleur permet de mettre en avant des éléments importants de l’interface (zones, boutons). Cela peut être donc des indications pour l’étape suivante de maquettage graphique (Photoshop).

5

Le pochoir Stencileo, l’outil magique pour réaliser de belles maquettes papiers 😉

6

Utiliser ce gabarit A4 avec les smartphones pré-imprimés permet de gagner du temps et de mieux se représenter les maquettes (voir tous nos gabarits PDF)

0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *