Cet article a pour but de vous présenter une des nouvelles fonctionnalités offertes par Axure RP 6 :

Les croquis (sketch) main levée
Une des grandes innovations d’Axure RP 6 est la possibilité de convertir vos maquettes de site internet en esquisse au crayon. Cela permet aux clients, de s’attarder sur l’ergonomie et non sur le design de la maquette.

Pré-requis

  • Axure RP Pro 6
  • Quelques notions d’ergonomie web

Création du Wireframe

Axure vous permet de créer très facilement des maquettes en fil de fer pour vos sites internet.
Pour cela, nous créons un nouveau document sur lequel nous glissons quelques Widgets :

  1. Un rectangle (représente une DIV)
  2. Un placeholder (emplacement spécifique)
  3. Une image

axure-wireframe
Vous voyez ? la création d’une maquette va être un jeu d’enfant.
Nous allons maintenance créer toutes les zones de notre page d’accueil du site internet en utilisant uniquement des placeholders et des rectangles.
Ceci va nous donner un premier squelette de site internet en quelques minutes.
axure-make-simple-sketch

A cette étape, nous avons un résultat très simple mais présentable à un client.

Ajout de contenu d’exemple

Afin de rendre notre maquette un peu plus parlante, nous allons ajouter un peu de contenu.
Dans notre exemple, nous allons utiliser un texte Lorem ipsum afin d’éviter toutes remarques d’un client sur le contenu. N’oublions pas que le but de cette maquette est de valider uniquement l’ergonomie. Il n’est pas question de contenu ou de design à cette étape du projet.
Pour les illustrations, nous utilisons simplement des emplacements d’images (ils seront remplacés par la suite).
axure-make-middle-sketch
Cette maquette correspond à ce que nous pouvions faire avec Axure RP 5.
Grâce à la version 6, nous allons pouvoir créer un style de page pour un rendu crayon.

Création d’un style de page web

Dans la fenêtre « Page formatting », nous créons un style Wixiweb Sketch.
Nous laissons toutes les propriétés par défaut sauf la zone Sketch Effect :

  1. Sketchiness : niveau d’imprécision des contours (40)
  2. Color : Couleur ou niveau de gris (Gris)
  3. Font : Police à utiliser pour le texte (Axure HandWriting)
  4. Line Width : Épaisseur du crayon (+1)

axure-sketch-options

Maquette finale (main levée)

En quelques minutes, nous arrivons une maquette de site internet mettant en avant l’ergonomie.
Le design et le contenu sont complètement mis de côté afin de permettre au client de se concentrer sur la navigation et sur l’agencement du site web.
axure-sketch-main-levee
Si vous avez plusieurs pages, Axure permet également de sortir une version HTML pour une démonstration.

Conclusion

Axure RP 6 contient de nombreuses nouvelles fonctionnalités simples à mettre en place. Ce logiciel confirme une fois de plus sa place de leader sur le marché des outils de wireframe.
Beaucoup trop d’agences web se lancent dans la réalisation de projet web en mettant de côté les phases de conception et spécification. Un outil comme Axure est un gage de qualité pour les projets web.

EDIT : Depuis Septembre 2012, Axure RP est disponible en version Standard pour les Freelances et les petites agences. N’hésitez pas à comparer les deux versions. Axure RP est également disponible depuis 2015 en version FR.

Si vous avez un projet web de conception d’application web, n’hésitez pas à nous contacter.