Paper first ! Les bonnes raisons pour démarrer les projets par des wireframes sur papier

Les logiciels, sites Web et applications mobiles font partie de notre quotidien. De nombreuses sociétés, agences et freelances travaillent à rendre tout cela plus joli, plus efficace, et plus facile à utiliser. Un grand nombre de professionnels est concerné, les concepteurs et développeurs évidemment, mais aussi les dirigeants et bien d’autres équipes comme les services clients par exemple. La capacité à créer des interfaces simples, efficaces et attractives est un enjeu primordial pour certaines entreprises. La manière d’exercer leur métier, voir même leur existence ou leur valeur en dépend parfois.

La création d’application web/mobiles n’est pas différente de l’architecture ou de la conception de produits industriels. 

L’architecte travaille sur papier car ainsi les idées sont rapidement formées. Cela peut être le début d’une grande idée ou la simplification de certains concepts avant d’en explorer les détails. Le papier facilite l’émergence des idées car on ne perd pas de temps à manipuler un logiciel. En début de projet, les idées foisonnent et partent dans toutes les directions, il est donc important de les capter toutes rapidement.
De plus, le démarrage du projet est un moment d’échanges importants entre toutes les parties prenantes (concepteur, développeur, client, dirigeant, etc…). Et comme faire des croquis est accessible à tout le monde, chacun peut exprimer ses idées facilement et rapidement. Enfin, rendre les idées visuelles, palpables tout de suite, permet de valider que tout le monde s’est bien compris. C’est un gain de temps assuré sur l’élaboration du cahier des charges, et évitera certaines itérations d’ajustement…

A ce stade le papier et le crayon présentent donc des avantages indéniables (rapide, collaboratif, et accessible à tous) face aux outils informatiques. Cependant on perd ce qu’apportent ces outils : le cadre et la rigueur technique, et peut-être la qualité de rendu des maquettes (enfin ça dépend des qualités de dessinateur de chacun !). C’est là qu’intervient le pochoir Stencileo.
Le minimum de rigueur technique exigée à ce stade est préservé. A savoir, respecter les proportions et échelles des éléments dessinés. Grâce à ses formes, et combiné aux gabarits pré-imprimés, le pochoir Stencileo permet de s’assurer que les wireframes sont réalistes et seront donc réalisables.
Côté rendu, le pochoir est l’outil idéal car il permet de tracer des zones et formes nettes, facilitant ainsi la lecture qui pourrait être détériorée par un croquis mal réalisé.

Se focaliser sur le fond grâce au papier

Oui mais photoshop c’est plus beau, diront certains. En effet, mais c’est une perte de temps à ce stade. En début de projet il faut valider le fond. Et il n’est pas nécessaire de tout maquetter sous photoshop pour valider un design. Alors que tout maquetter sur papier ou sur un outil informatique par la suite sera nécessaire pour les développeurs. Enfin, une maquette papier permet de vraiment se focaliser sur le fond, alors que si vous présentez des maquettes très avancées graphiquement, les personnes auront tendance naturellement à s’intéresser à la forme au lieu du fond. Et encore une fois ce n’est pas le moment !

Communiquez visuellement

Communiquez visuellement par le dessin. C’est une excellente façon de développer une idée, d’explorer ses possibilités, d’en définir les contours. C’est un moyen utilisable et compréhensible par tous. C’est plus facile que d’essayer d’exprimer verbalement les concepts ! Comme le disait déjà si bien ce cher Confucius :

un dessin vaut mille mots

Et valider des maquettes c’est le meilleur moyen d’être sûr que tout le monde s’est compris. Et à ce stade la compréhension du besoin est le plus important pour ne pas perdre de temps et bien démarrer le projet. Confusius encore pour terminer (et non il ne bossait pas dans le web 😉 ) : Je ne cherche pas à connaître les réponses, je cherche à comprendre les questions.

Alors lancez-vous, dessinez ! pensez visuellement ! et faites-le comme un pro avec Stencileo 🙂

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)

Gabarits PDF prêts à dessiner – téléchargement gratuit

Utilisez nos gabarits à imprimer facilite l’alignement des éléments, permet une meilleure représentation et fait gagner du temps !

3 gabarits PDF prêts à dessiner en téléchargement gratuit :
Smartphone – A4 paysage
Desktop – A4 portrait
Responsive (desktop et smartphone)- A4 paysage

Qu’est-ce qu’un normographe ?

En consultant la définition d’un dictionnaire vous trouveriez une explication de ce genre : le normographe est une plaquette de matière rigide, traversée par des fentes en forme de lettres, de chiffres ou de symboles. On déplace un crayon pour effectuer le tracé correspondant sur le support où on la maintient appliquée.

Finalement vous connaissez cet objet !
Généralement de matière plastique transparente, nous avons tous utilisé un normographe à l’école pour réaliser des formes courantes : carré, rond, lettre… Par exemple en cours de géographie pour représenter des villes de différentes tailles sur une carte, ou encore des reliefs. Ou alors en cours de mathématique (géométrie) ou de technologie (schémas techniques).

On trouve aujourd’hui également des normographes « fantaisie » avec des formes très variées. Certains servent comme pochoir pour dessiner de beaux tracés réguliers sur du papier ou du tissu. D’autres s’utilisent pour faire des découpes pour la réalisation de bijoux par exemple.

Il existe cependant aussi des versions complexes utilisées par différents métiers. On trouve des normographes pour tracer des plans d’architecte, des plans techniques, ou encore de tactiques militaires. Ce type d’outil est précieux pour tracer les différents symboles techniques qui sont bien souvent normés. Cela évite des erreurs de compréhension dues à des tracés réalisés de manière approximative.

Adaptation pour le design et l’UI/UX
Le pochoir smartphone de Stencileo fait partie de ces normographes. Il s’adresse aux web-designers, chefs de projets, product manager, et tout simplement à toutes les personnes étant amenées à réaliser des maquettes d’applications web ou mobiles.

Il permet de :

  • matérialiser des zones (ex : de saisie) ou des boutons
  • dessiner de belles icônes bien régulières
  • réussir à tracer des icônes complexes à réaliser à la main
  • stimuler l’imagination avec sa bibliothèque de formes
  • frimer un peu avec un objet professionnel original 😉

Ce qui garanti :

  • des maquettes papiers jolies et professionnelles montrables à sa hiérarchie ou à son client
  • une lecture et une compréhension facilitées par la clarté des tracés
  • un zoning et des proportions respectées (échelle identique)
  • la satisfaction du travail bien fait 😉